Merancang Antaramuka yang Fokus untuk Penglibatan Pengguna yang Lebih Baik

Penglibatan pengguna adalah metrik rumit yang boleh dicapai dengan cara yang berbeza untuk projek yang berbeza. Kebanyakan pereka berfikir tentang antara muka apabila mereka bercakap tentang interaktiviti, tetapi kandungan halaman juga boleh menggalakkan interaksi pengguna. Untuk penglibatan pengguna yang lebih baik, penting untuk menulis kandungan yang menarik, dan kemukakan kandungan itu dalam reka bentuk yang menarik.

Ia lebih mudah dikatakan daripada dilakukan, tetapi jika anda belajar beberapa asas anda tidak akan mengalami masalah kerajinan fokus UI dengan kandungan yang hebat untuk projek anda.

Dalam jawatan ini, saya akan menunjukkan kepada anda bagaimana untuk meningkat interaksi pengguna & penglibatan kandungan di antara muka berasaskan web. Ini adalah dua cara yang paling biasa untuk melibatkan pengunjung, dan jika anda boleh mengoptimumkan pengalaman anda tidak akan mengalami masalah yang meningkatkan masa yang lumayan pada metrik halaman.

Tangkap Novelty

Konsep kebaharuan mentakrifkan suatu peristiwa atau perkara yang pada umumnya baru, sering sangat baru dan unik berdasarkan konteks. Acara-acara novel ambil perhatian kami kerana mereka menonjol. Ini juga benar pada reka bentuk antara muka dengan kebaruan yang mewakili elemen yang kelihatan melompat dari halaman.

Baru-baru ini saya mendapati jawatan yang hebat membincangkan kepentingan sesuatu perkara ketika datang ke pertunangan. Pengguna kelihatan seperti tertarik terhadap pengalaman novel, antara muka, dan elemen UI kerana mereka berbeza. Fakta tunggal yang direka secara berbeza sering menarik perhatian.

Satu contoh umum ialah butang panggilan untuk aksi yang ditemui pada kebanyakan halaman pendaratan. Anda juga boleh membina sesuatu yang baru gambar latar belakang, ilustrasi, atau tangkapan aplikasi, seperti pada halaman pendaratan Uber untuk Perniagaan.

Halaman ini mempunyai butang panggilan untuk bertindak tetapi perhatian saya segera pergi ke tangkapan skrin. Mereka bernyawa apabila pertama dimuatkan supaya gabungan ini kebaharuan reka bentuk dengan gerakan untuk menarik perhatian.

Satu alternatif akan menggunakan GiftRocket ikon yang digambarkan sebagai pautan untuk menyelidiki lebih lanjut ke laman web ini.

Kedua-dua contoh ini gunakan kebaruan untuk kelebihan mereka. Anda tidak boleh terus menarik orang ke laman web ini, tetapi anda akan melihat hasil yang lebih baik jika anda menarik perhatian mereka pada tahap mendatar pertama.

Reka bentuknya adalah perkara pertama pelawat melihat, dan anda perlu menangkap perhatian mereka dalam beberapa saat untuk menggalakkan penglibatan lebih lanjut.

Typography yang boleh dimakan

Kajian mendapati kebanyakan pengguna imbas halaman web dan bukannya membaca kata demi kata. Anda mungkin mahu menarik orang ke dalam membaca kandungan anda, tetapi anda hanya boleh berbuat begitu banyak.

Alternatif terbaik ialah membuat kandungan yang boleh dikalahkan dengan berita utama, teks tebal, dan gambar yang menggambarkan apa yang anda cuba katakan. Saya boleh fikirkan sekurang-kurangnya tiga teknik penulisan yang kuat anda boleh menggunakan kandungan anda meningkatkan kebolehbacaan:

1. Bahagikan kandungan dengan sari kata yang jelas
2. Pecahkan perenggan untuk menjadikannya lebih kecil
3. Gunakan senarai bulleted untuk berkongsi mata anda lebih cepat

Matlamatnya adalah untuk menjaga pembaca anda bergerak ke bawah halaman dengan cara apa pun yang perlu. Dengan menjaga kandungan kecil dalam ketulan bersaiz gigitan anda akan mempunyai masa yang lebih mudah menangkap perhatian dan memandu orang lebih jauh ke laman web ini.

Lihat blog Quick Sprout untuk contoh gaya penulisan ini. Kandungan ditulis oleh Neil Patel dan dia sering menulis kandungan yang sangat panjang, tetapi dia memecahkan perenggan masing-masing 1-3 ayat.

Jika anda mempunyai tajuk utama yang betul, dan gunakan imej / mata peluru di seluruh kandungan, anda akan mendapat orang yang membaca dan membaca lebih lanjut. Juga pastikan untuk menambah jumlah ruang kosong antara perenggan. Margin dan paddings kedua-duanya memainkan peranan besar dalam reka bentuk & pembacaan susun atur.

Reka bentuk teks supaya ia sebenarnya menyeronokkan untuk dibaca. Salinan membosankan tidak akan menarik, tetapi tidak akan menyalin salinan yang terlalu kecil atau kurang.

Imej Menangkap Mata

Kajian kes terbaru oleh Backlinko menunjukkan bahawa halaman dengan sekurang-kurangnya satu imej secara amnya pangkat lebih tinggi daripada halaman tanpa imej. Ini hebat dari perspektif SEO.

Tetapi bagaimana dengan penglibatan pengguna? Sekiranya anda boleh menyimpan imej itu di atas lipatan atau dekat dengan bahagian atas ia juga akan menarik perhatian pengunjung sebelum mereka melantun. Ingatlah bahawa elemen halaman novel cenderung menarik.

Apabila anda mempunyai imej (atau banyak imej) yang diselingi di seluruh halaman yang anda akan memecahkan monotoni blok teks membosankan. Pengguna boleh berehat dari membaca untuk menghargai imej, atau membuat sambungan antara imej dan kandungan bertulis. Tetapi seperti kebanyakan teknik reka bentuk, kualiti lebih berharga daripada kuantiti.

Kajian kes Moz mendapati bahawa imej berkualiti tinggi cenderung menyimpan pelawat pada halaman untuk lebih lama. Sebaliknya, imej berkualiti rendah tidak berfungsi juga dan dalam beberapa kes mereka menyebabkan pelawat melantun lebih cepat daripada tanpa imej. Anda harus cuba memasukkan sekurang-kurangnya satu imej yang ada berkaitan dengan kandungan dan itu memberikan nilai kepada pembaca.

TechCrunch melakukan ini dengan imej yang dipaparkan dalam artikel mereka di mana anda akan sering mencari gambar yang dipaparkan di atas lipatan.

WordPress menjadikan penambahan imej yang dipaparkan mudah dengan ciri petikan pos. Anda boleh menetapkan foto yang berbeza untuk setiap jawatan yang anda tulis dan memaksanya muncul di bahagian atas halaman. Ini adalah cara yang sempurna untuk memberi pengunjung gambaran apa kandungannya, dan untuk meningkatkan CTR untuk widget pos terkait yang juga mengandungi lakaran mini.

Elemen Page Contrasting

Jika anda perlu memberi perhatian kepada satu kawasan tertentu pada halaman kemudian asimetri adalah kawan baik awak. Sebaliknya memacu baji keras antara kawasan tertentu reka bentuk atau blok kandungan tertentu.

Pelawat secara semulajadi merosakkan ke arah kontras kerana ia berbeza. Juxtapositions besar warna, saiz, atau ruang putih menarik mata kerana ia memecahkan cetakan segala yang lain dalam susun atur.

Contoh kegemaran saya untuk unsur halaman yang berbeza mungkin adalah halaman utama Lakaran. Terdapat banyak kontras yang dijumpai antara dua butang panggilan ke tindakan, satu untuk memuat turun perbicaraan lakaran dan yang lain untuk membeli salinan.

Butang pembelian menggunakan warna latar penuh lebih cerah daripada warna lain dalam tajuk. Teks butang juga lebih cerah berbanding dengan butang percubaan percuma. Ini membawa pengunjung ke arah butang Buy Now semata-mata dari rangsangan visual.

Anda akan melihat a teknik yang serupa pada halaman rumah Monster Optin. Tandukan ini hanya mempunyai satu butang berlabel Dapatkan OptinMonster Sekarang. Ia adalah butang hijau terang pada latar belakang biru tanpa unsur-unsur hijau yang kelihatan.

Warna, saiz, dan bentuk semuanya menarik perhatian anda kerana ia berbeza dengan segala yang lain dalam tajuk. Secara langsung di sebelah butang adalah pautan teks kecil untuk pratonton video. Mungkin video yang hebat dan patut mendapat perhatian, tetapi tidak seperti butang CTA percubaan / pendaftaran.

Untuk blog, anda mungkin mempunyai kelayakan yang berbeza untuk penglibatan pengguna. Satu pilihan umum adalah a borang pendaftaran surat berita seperti contoh di Aeolidia.

Jika anda menatal ke bahagian bawah kandungan yang anda akan perhatikan kotak pendaftaran fancy-shmancy direka hanya untuk borang buletin. Ia menonjol dari seluruh halaman dengan warna latar belakang yang unik, tipografi yang menyeronokkan, dan ikon Raja Triton yang comel.

Cara terbaik untuk mereka bentuk dengan kontras adalah dengan mengkaji contoh dan hanya percubaan. Lihat apa yang berfungsi dan apa yang tidak oleh metrik pengesanan dengan ujian A / B. Jika anda mencari lebih banyak contoh, lihat tulisan Codrops ini penuh tip dan skrin laman web asimetri langsung.

Galakkan Interaksi Pengguna

Terdapat banyak cara untuk memastikan pengunjung berminat dalam laman web, tetapi yang paling biasa adalah dapatkan mereka melakukan perkara-perkara. Ini berlaku bagi kedua blog statik dan laman sosial yang dinamik. Tidak ada satu-saiz-sesuai untuk semua ini. Anda boleh melakukan apa sahaja kerja untuk membuat pengguna berasa terlibat dengan halaman tersebut.

Didalam tapak statik, anda mungkin menambah banyak pautan yang berkaitan untuk membaca lebih lanjut, atau masukkan gambar slaid. Anda juga boleh tambah borang untuk komen pengguna atau surat berita e-mel.

Apabila ia datang antara muka dinamik, tujuan tapak biasanya untuk menggalakkan penglibatan pengguna. Halangan terbesar ialah mengajar pengguna bagaimana laman web ini berfungsi, dan bagaimana untuk melibatkan diri dengan muka dengan betul.

Lihat siaran ini oleh KissMetrics bercakap mengenai teknik penglibatan pengguna. Salah satu strategi terbaik yang saya dapati ialah merancang lawatan berpandu yang membawa pelawat melalui setiap ciri utama.

Fikirkan bagaimana membingungkan prospek Twitter akan menjadi pengguna baru. Jika mereka tidak mengikut sesiapa dan tidak mempunyai pengikut, kenapa mereka akan tweet?

The “Ikut cadangan” kotak semasa pendaftaran membantu pengguna baru berkenalan dengan cara kerja Twitter. Ciri ini menggunakan nombor baru pengguna mula melibatkan diri dengan platform, dan untuk bereksperimen dengan ciri-ciri seperti berikut, tweet, dan mesej peribadi.

Selain lawatan berpandu, anda juga mahu membuat antara muka mudah. Ciri-ciri utama sepatutnya 1-2 klik jauh dari papan pemuka atau halaman utama pengguna. Antara muka intuitif perlu penjelasan, dan kesederhanaan menangkap perhatian lebih cepat.

Dengan memahami semua teknik ini, anda akan mempunyai antaramuka bangunan masa yang lebih mudah menyelesaikan masalah pengguna, dan menggalakkan pengguna baru untuk menyertai. Jika anda mencari lebih banyak lagi Petua hubungan reka bentuk UX semak siaran yang berkaitan:

• Tactic Onboarding Pengguna untuk Meningkatkan Penglibatan (thinkapps.com)
• Pelajaran dalam Penglibatan Secara Bertingkat (uxbooth.com)
• Jangan menganggap pengguna baru ingin mengetahui cara menggunakan produk anda (uxdesign.cc)