Desain Halaman Web: Panduan Komprehensif – Desain web adalah subjek yang kompleks. Desainer dan pengembang harus mempertimbangkan tampilan visual (bagaimana tampilan situs web) dan desain fungsional (cara kerja situs web). Dengan begitu banyak hal yang perlu Anda perhitungkan, proses desain bisa jadi rumit. Untuk menyederhanakan tugas, kami telah menyiapkan panduan ini untuk Anda.
Desain Halaman Web: Panduan Komprehensif
allfreebackgrounds.com – Dalam panduan ini, kami akan fokus pada prinsip utama, heuristik, dan pendekatan yang akan membantu Anda menciptakan pengalaman pengguna yang luar biasa untuk situs web Anda. Kita akan mulai dengan hal-hal global, seperti alur pengguna (cara menentukan struktur situs web), dan kemudian turun ke halaman individual (apa yang harus dipertimbangkan selama desain halaman web). Kami juga akan membahas aspek penting desain lainnya, seperti pertimbangan dan pengujian seluler.
Merancang aliran pengguna
Hal pertama yang perlu dipertimbangkan adalah aliran pengguna Anda, atau jalur yang digunakan pengunjung untuk menavigasi situs web Anda. Lagi pula, desain halaman web bukan tentang membuat kumpulan halaman individual; ini tentang menciptakan arus. Jalur ini adalah serangkaian langkah yang diambil pengunjung dari titik masuk (halaman pertama tempat mereka mendarat) menuju tindakan spesifik yang Anda ingin mereka lakukan (biasanya tindakan konversi, seperti pendaftaran, pembelian, dll.) . Berikut ini akan membantu Anda menentukan arus pengguna saat Anda mendesain situs web Anda.
Arsitektur informasi
Arsitektur informasi (IA) adalah disiplin yang memungkinkan Anda mengatur informasi dengan jelas dan logis untuk pengunjung Anda. Arsitek informasi menganalisis bagaimana pengguna menyusun informasi dan membuat hierarki yang selaras dengan harapan pengguna. IA yang baik adalah hasil dari penelitian pengguna yang solid dan pengujian kegunaan.
Ada beberapa cara untuk meneliti kebutuhan pengguna. Seringkali, seorang arsitek informasi akan mengambil bagian aktif dalam wawancara pengguna, penyortiran kartu, dan pengujian kegunaan yang dimoderasi di mana mereka mengamati bagaimana orang berinteraksi dengan desain yang ada dan membagikan pendapat mereka tentangnya.
IA juga digunakan untuk menentukan navigasi dan menu situs. Ketika praktisi UX selesai mengerjakan menu, mereka menggunakan teknik lain yang disebut “pengujian pohon” untuk membuktikan bahwa itu akan berhasil. Pengujian pohon terjadi sebelum merancang antarmuka yang sebenarnya.
Navigasi global
Navigasi adalah landasan kegunaan. Jika pengunjung tidak dapat menavigasi situs web Anda, kemungkinan besar mereka akan pergi. Itu sebabnya navigasi di situs web Anda harus mematuhi beberapa prinsip:
Kesederhanaan. Navigasi Anda akan membantu pengunjung memahami cara menjelajahi situs Anda dengan klik sesedikit mungkin.Kejelasan. Seharusnya tidak ada tebakan tentang arti setiap opsi navigasi.Konsistensi. Sistem navigasi harus sama untuk semua halaman di situs web.Pertimbangkan beberapa hal saat mendesain navigasi:
Pilih pola navigasi berdasarkan kebutuhan pengguna. Navigasi harus mengakomodasi kebutuhan sebagian besar pengunjung situs web Anda. Misalnya, lebih baik untuk menghindari navigasi menu hamburger jika sebagian besar pengguna Anda tidak mengetahui arti dari ikon itu sendiri.
Prioritaskan opsi navigasi. Tim desain yang baik akan memprioritaskan opsi navigasi sesuai dengan tugas umum pengguna, dengan mempertimbangkan prioritas dan frekuensi tugas.
Baca Juga : Mendesain Situs Web Trending: Tutorial Desain Flat & Minimalis
Membuatnya terlihat. Minimalkan beban kognitif pengguna dengan membuat opsi navigasi penting terlihat secara permanen. Saat kami menyembunyikan opsi navigasi, kami berisiko pengunjung tidak dapat menemukannya .
Komunikasikan lokasi saat ini. Gagal menunjukkan lokasi pengunjung saat ini adalah masalah umum di banyak situs web. Jika pengunjung harus bertanya, “Di mana saya?”, itu indikasi yang jelas bahwa navigasi Anda perlu diperbaiki. Untuk situs web besar, tawarkan indikator lokasi seperti remah roti.
Desain visual dan fungsional tautan web
Tautan adalah elemen kunci dalam navigasi web. Desain visual dan fungsional mereka memiliki dampak langsung pada kegunaan. Ikuti beberapa aturan dengan elemen interaktif ini:
Kenali perbedaan antara tautan internal dan eksternal. Pengguna mengharapkan perilaku yang berbeda untuk tautan internal dan eksternal. Semua tautan internal harus terbuka di tab yang sama sehingga pengunjung dapat menggunakan tombol “kembali”.
Ubah warna tautan yang dikunjungi. Saat tautan yang dikunjungi tidak berubah warna, pengguna dapat secara tidak sengaja mengunjungi kembali halaman yang sama beberapa kali.
Periksa kembali semua tautan. Sangat frustasi untuk tiba di halaman kesalahan 404. Gunakan alat seperti Pemeriksa Tautan Mati untuk menemukan tautan yang rusak di situs web Anda.
Tombol “Kembali” di browser
Tombol “kembali” mungkin merupakan tombol yang paling sering digunakan di browser, jadi pastikan tombol tersebut berfungsi sesuai dengan harapan pengguna. Ketika pengguna mengikuti tautan di halaman dan kemudian mengklik tombol “kembali”, mereka berharap untuk kembali ke tempat yang sama di halaman asli. Hindari situasi di mana mengklik “kembali” membawa pengguna ke bagian atas halaman awal, alih-alih di mana mereka tinggalkan, terutama pada halaman yang panjang. Kehilangan tempat memaksa pengguna untuk menggulir konten yang telah mereka lihat, yang menyebabkan biaya interaksi yang tidak perlu.
Tepung roti
Breadcrumbs adalah sekumpulan tautan kontekstual yang berfungsi sebagai alat bantu navigasi di situs web. Ini adalah skema navigasi sekunder yang biasanya menunjukkan lokasi pengguna di situs web.
Meskipun elemen ini tidak memerlukan banyak penjelasan, beberapa hal perlu disebutkan:
Jangan gunakan remah roti sebagai pengganti navigasi utama. Pengunjung harus menggunakan menu utama untuk bernavigasi; remah roti seharusnya hanya mendukung pengunjung dalam hal itu. Ketika pengunjung mengandalkan remah roti sebagai metode navigasi utama, daripada fitur tambahan, ini merupakan indikasi yang jelas dari desain navigasi yang buruk.
Pisahkan setiap level dengan jelas. Gunakan panah sebagai pemisah, bukan garis miring. Garis miring (/) dapat dengan mudah berbenturan dengan kategori produk di situs web e-niaga. Jika Anda akan menggunakan garis miring, pastikan tidak ada kategori produk yang memiliki garis miring:
Mencari
Beberapa pengunjung datang ke situs web untuk mencari item tertentu. Karena mereka tahu apa yang mereka inginkan, mereka mungkin tidak akan menggunakan opsi navigasi untuk menemukannya. Fitur “Pencarian” akan bertindak sebagai jalan pintas dalam kasus ini. Pengunjung harus dapat mengetik teks di kotak pencarian, mengirimkan kueri pencarian mereka, dan menemukan halaman yang mereka cari.
Pertimbangkan beberapa aturan dasar ini saat mendesain kotak telusur:
Letakkan kotak telusur di tempat yang diharapkan pengguna untuk menemukannya. Bagan di bawah ini, berdasarkan studi oleh A. Dawn Shaikh dan Keisi Lenz , menunjukkan lokasi yang diharapkan dari bidang pencarian menurut survei terhadap 142 peserta. Studi ini menemukan bahwa tempat yang paling nyaman adalah kiri atas atau kanan atas setiap halaman di situs web.
Gunakan ikon kaca pembesar untuk menarik perhatian ke area tersebut. Ikon kaca pembesar memiliki arti universal —sebagian besar pengguna sudah mengenalnya. Nielsen Norman Group merekomendasikan penggunaan ikon skema, versi paling sederhana dari kaca pembesar.
Ukuran kotak input dengan tepat. Membuat bidang input terlalu pendek adalah kesalahan umum. Tentu saja, pengguna dapat mengetikkan kueri panjang ke dalam bidang pendek, tetapi hanya sebagian teks yang akan terlihat pada satu waktu, yang tidak bagus untuk kegunaan. Faktanya, jika kotak pencarian terlalu pendek, pengunjung cenderung menggunakan kueri yang pendek dan tidak tepat, karena kueri yang lebih panjang bisa sulit dan tidak nyaman untuk dibaca. Kolom input 27 karakter akan menampung 90% kueri.
Letakkan kotak pencarian di setiap halaman. Tampilkan kotak pencarian di setiap halaman sehingga pengguna dapat mengaksesnya di mana pun mereka berada di situs web.
Merancang halaman individual
Sekarang setelah kita meninjau dasar-dasar alur pengguna, saatnya mempelajari cara mendesain halaman web individual. Di bawah ini kami telah merangkum pedoman desain situs web utama yang perlu diketahui.
Strategi konten
Ketika datang ke desain halaman web, hal yang paling penting adalah mendesain di sekitar tujuan halaman. Strategi konten—yang mengacu pada perencanaan, pembuatan, dan pengelolaan konten di situs web Anda—akan membantu dalam latihan ini. Setiap halaman memiliki tujuannya sendiri, seperti memberi tahu pengunjung tentang sesuatu atau mendorong mereka untuk berkonversi. Setelah Anda memahami tujuan halaman, baru setelah itu Anda harus mengerjakan desain atau menulis konten.
Berikut adalah beberapa tip praktis saat Anda mempertimbangkan strategi konten Anda:
Mencegah informasi yang berlebihan. Terlalu banyak informasi pada halaman dapat dengan mudah membanjiri pengunjung. Ada beberapa cara sederhana untuk meminimalkan informasi yang berlebihan. Salah satu teknik umum adalah chunking: memecah konten menjadi potongan-potongan kecil untuk membantu pengguna memahami dan memprosesnya dengan lebih baik. Formulir checkout adalah contoh sempurna untuk ini. Tampilkan, paling banyak, lima hingga tujuh bidang input sekaligus dan uraikan proses checkout menjadi langkah-langkah mudah, seperti pada tangkapan layar ini:
Hindari jargon dan istilah khusus industri. Setiap istilah atau frasa yang tidak dikenal yang muncul di halaman akan mempersulit pengunjung untuk memahami informasi tersebut. Taruhan yang aman adalah menulis untuk semua tingkat membaca dan memilih kata-kata yang jelas dan mudah dimengerti oleh semua orang.
Minimalkan kalimat yang panjang. Tulis dalam segmen kecil yang dapat dipindai. Menurut buku Robert Gunning “How to Take the Fog Out of Business Writing”, kalimat harus 20 kata atau kurang.
Hindari penggunaan huruf kapital pada semua huruf. Teks huruf besar semua cocok untuk akronim dan logo. Tapi sebaiknya hindari semua huruf kapital untuk paragraf, label formulir, kesalahan, dan pemberitahuan. Dalam bukunya Legibility of Print , Miles Tinker menyebutkan bahwa huruf besar semua secara dramatis mengurangi kecepatan membaca.
Struktur halaman
Halaman yang terstruktur dengan baik akan membantu pengunjung menemukan setiap elemen antarmuka pengguna. Meskipun tidak ada aturan satu ukuran untuk semua, ada beberapa panduan desain situs web yang akan membantu Anda membuat struktur yang solid:
Buatlah dapat diprediksi. Lihat situs web pesaing Anda, identifikasi pola desain umum, dan sesuaikan dengan harapan pengguna dengan menggunakan pola desain yang akrab bagi audiens target Anda.
Gunakan kisi tata letak. Kisi tata letak membagi halaman menjadi wilayah utama dan mendefinisikan hubungan antar elemen dalam hal ukuran dan posisi. Dengan bantuan kisi, menggabungkan berbagai bagian halaman dalam tata letak yang kohesif menjadi lebih mudah
Gunakan gambar rangka dengan fidelitas rendah untuk memprivatisasi elemen penting. Wireframing dapat menghemat banyak waktu desainer web. Sebelum membuat halaman dengan elemen nyata, buat gambar rangka, analisis, dan hapus apa pun yang tidak terlalu diperlukan.
Hirarki visual
Orang lebih cenderung memindai halaman web dengan cepat daripada membaca semua yang ada di sana. Oleh karena itu, ada baiknya untuk mengoptimalkan desain halaman web Anda untuk pemindaian cepat. Anda dapat membantu pengunjung menemukan apa yang mereka butuhkan dengan hierarki visual yang baik, yang mengacu pada pengaturan atau penyajian elemen pada halaman web dengan cara yang menunjukkan kepentingan mereka (yaitu, di mana mata mereka harus fokus pertama, kedua, dll.) . Hirarki visual yang baik dapat meningkatkan kemampuan pemindaian halaman secara signifikan .
Gunakan pola pemindaian alami. Sebagai desainer, kami memiliki banyak kendali atas di mana orang melihat saat mereka melihat halaman. Pola berbentuk F dan pola berbentuk Z adalah dua pola pemindaian alami yang dapat membantu Anda mengatur jalur yang tepat untuk mata pengunjung. Untuk halaman yang banyak teks, seperti artikel dan hasil pencarian, pola F lebih baik, sedangkan pola Z bagus untuk halaman yang tidak berorientasi teks.
Prioritaskan elemen penting secara visual. Jadikan elemen penting, seperti konten utama atau tombol ajakan bertindak utama Anda, sebagai titik fokus sehingga pengunjung dapat langsung melihatnya.
Buat maket untuk memperjelas hierarki visual. Mockup adalah artefak desain dengan ketelitian tinggi yang memungkinkan desainer untuk melihat seperti apa tampilan akhir tata letak. Menata ulang elemen dalam alat desain web jauh lebih mudah daripada melakukannya dengan kode.