9 Panduan & Praktik Terbaik untuk Desain dan Kegunaan Web yang Luar Biasa – Ketika datang untuk mendesain atau mendesain ulang situs web, sangat mudah untuk terpaku pada estetika. Apakah warna biru itu terlihat benar? Haruskah logo berada di sisi kanan layar, atau kiri? Bagaimana jika kita meletakkan GIF animasi raksasa di tengah halaman?
9 Panduan & Praktik Terbaik untuk Desain dan Kegunaan Web yang Luar Biasa
Baca Juga : Situs Web Background Terbaik 2022
allfreebackgrounds – Namun, di dunia di mana orang-orang memiliki lebih dari 1,8 miliar situs web yang berpotensi mereka kunjungi, Anda perlu memastikan bahwa wajah Anda tidak hanya cantik . Itu harus dirancang untuk kegunaan , seberapa mudah situs web Anda digunakan, dan pengalaman pengguna (UX) , betapa menyenangkannya berinteraksi dengan situs web Anda.
Sekarang, Anda dapat menghabiskan waktu bertahun-tahun untuk mempelajari seluk beluk disiplin ilmu ini. Tetapi demi memberi Anda titik awal, kami telah mengumpulkan daftar pedoman dasar dan praktik terbaik yang dapat Anda terapkan untuk mendesain ulang situs web atau situs web Anda berikutnya. peluncuran . Kemudian, kami akan meninjau 10 fitur yang Anda perlukan di situs Anda untuk menerapkan rekomendasi ini. Mari selami.
1. Kesederhanaan
Meskipun tampilan situs web Anda tentu penting, kebanyakan orang tidak datang ke situs Anda untuk mengevaluasi seberapa apik desainnya. Mereka ingin menyelesaikan beberapa tindakan, atau menemukan informasi tertentu.
Oleh karena itu, elemen desain yang tidak perlu (yaitu, yang tidak memiliki tujuan fungsional) hanya akan membebani dan mempersulit pengunjung untuk mencapai apa yang ingin mereka capai.
Dari perspektif kegunaan dan UX, kesederhanaan adalah teman terbaik Anda. Jika Anda memiliki semua elemen halaman yang diperlukan, sulit untuk menjadi terlalu sederhana. Anda dapat menerapkan prinsip ini dalam berbagai bentuk yang berbeda, seperti:
Warna: Pada dasarnya, tidak menggunakan banyak. The Handbook of Computer-Human Interaction merekomendasikan penggunaan maksimal lima (plus atau minus dua) warna berbeda dalam desain Anda.
Tipografi: Tipografi yang Anda pilih harus sangat mudah dibaca, jadi tidak ada font skrip yang terlalu berseni dan sangat minim, jika ada. Untuk warna teks, sekali lagi, tetap minimal dan selalu pastikan kontras dengan warna latar belakang. Rekomendasi umum adalah menggunakan maksimal tiga tipografi berbeda dalam maksimal tiga ukuran berbeda.
Grafik: Hanya gunakan grafik jika membantu pengguna menyelesaikan tugas atau melakukan fungsi tertentu (jangan hanya menambahkan grafik mau tak mau).
2. Hirarki Visual
Terkait erat dengan prinsip kesederhanaan, hierarki visual berarti mengatur dan mengatur elemen situs web sehingga pengunjung secara alami tertarik pada elemen yang paling penting terlebih dahulu.
Ingat, dalam hal mengoptimalkan kegunaan dan UX, tujuannya adalah mengarahkan pengunjung untuk menyelesaikan tindakan yang diinginkan, tetapi dengan cara yang terasa alami dan menyenangkan. Dengan menyesuaikan posisi, warna, atau ukuran elemen tertentu, Anda dapat menyusun situs Anda sedemikian rupa sehingga pemirsa akan tertarik ke elemen tersebut terlebih dahulu.
Dalam contoh di bawah ini dari Spotify , Anda dapat melihat bahwa judul utama “Dapatkan 3 bulan Premium gratis” berada di atas hierarki visual dengan ukuran dan posisi halamannya. Itu menarik perhatian Anda ke misi mereka sebelum hal lain. Ini diikuti oleh CTA “Dapatkan 3 Bulan Gratis”, yang meminta tindakan. Pengguna dapat mengklik CTA ini, atau memindai item menu di atas untuk tindakan lebih lanjut.
3. Kemampuan navigasi
Merencanakan navigasi intuitif di situs Anda sangat penting untuk membantu pengunjung menemukan apa yang mereka cari. Idealnya, pengunjung harus mendarat di situs Anda dan tidak perlu berpikir panjang lebar tentang ke mana harus mengklik selanjutnya. Perpindahan dari titik A ke titik B harus selancar mungkin.
Berikut adalah beberapa tip untuk mengoptimalkan navigasi situs Anda:
Jaga agar struktur navigasi utama Anda tetap sederhana (dan di dekat bagian atas halaman Anda).
Sertakan navigasi di footer situs Anda.
Pertimbangkan untuk menggunakan remah roti di setiap halaman (kecuali beranda Anda) sehingga pengguna mengingat jejak navigasi mereka.
Sertakan bilah pencarian di dekat bagian atas situs Anda sehingga pengunjung dapat mencari berdasarkan kata kunci.
Jangan menawarkan terlalu banyak pilihan navigasi per halaman. Sekali lagi, kesederhanaan!
Sertakan tautan dalam salinan halaman Anda, dan jelaskan ke mana tautan itu pergi.
Jangan membuat pengguna menggali terlalu dalam. Coba buat peta gambar rangka dasar dari semua halaman situs Anda yang disusun seperti piramida: Beranda Anda ada di bagian atas, dan setiap halaman yang ditautkan dari sebelumnya membentuk lapisan berikutnya.
Dalam kebanyakan kasus, yang terbaik adalah menjaga peta Anda tidak lebih dari tiga tingkat. Ambil peta situs HubSpot, misalnya.
Satu petunjuk lagi: Setelah Anda menentukan apa yang akan menjadi navigasi utama (atas) situs Anda, pertahankan agar tetap konsisten. Label dan lokasi navigasi Anda harus tetap sama di setiap halaman.Ini membawa kita dengan baik ke prinsip kita berikutnya.
4. Konsistensi
Selain menjaga navigasi Anda tetap konsisten, keseluruhan tampilan dan nuansa situs Anda harus serupa di semua halaman situs Anda.
Itu tidak berarti setiap halaman harus mengikuti tata letak yang sama. Sebaliknya, buat tata letak yang berbeda untuk jenis halaman tertentu (misalnya, halaman arahan, halaman informasi, dll.). Dengan menggunakan tata letak tersebut secara konsisten, Anda akan memudahkan pengunjung untuk memahami jenis informasi apa yang mungkin mereka temukan di laman tertentu.
Pada contoh di bawah ini, Anda dapat melihat bahwa Airbnb menggunakan tata letak yang sama untuk semua halaman “Bantuan”, sebuah praktik umum. Bayangkan bagaimana jadinya dari sudut pandang pengunjung jika setiap halaman “Bantuan” memiliki tata letak uniknya sendiri. Mungkin akan ada banyak orang yang mengangkat bahu.
5. Responsivitas
Menurut Statista , 48% tampilan halaman global berasal dari perangkat seluler seperti ponsel cerdas dan tablet. Dan menurut penelitian kami , 93% orang telah meninggalkan situs web karena tidak ditampilkan dengan benar di perangkat mereka.
Kesimpulannya di sini: Untuk memberikan pengalaman pengguna yang benar-benar hebat, situs Anda harus kompatibel dengan banyak perangkat berbeda yang digunakan pengunjung Anda. Di dunia teknologi, ini dikenal sebagai desain responsif .
Desain responsif berarti berinvestasi dalam struktur situs web yang sangat fleksibel. Di situs responsif, konten secara otomatis diubah ukurannya dan diacak ulang agar sesuai dengan dimensi perangkat mana pun yang digunakan pengunjung. Ini dapat dilakukan dengan templat HTML yang ramah seluler, atau dengan membuat situs seluler khusus.
Pada akhirnya, lebih penting untuk memberikan pengalaman hebat di berbagai perangkat daripada terlihat identik di semua perangkat tersebut.
Selain ramah seluler, ada baiknya Anda menguji kompatibilitas browser lintas-silang situs web Anda. Kemungkinan besar, Anda hanya melihat situs Anda di satu browser web, baik itu Google Chrome, Safari, Firefox, atau yang lainnya.
Sekaranglah waktunya untuk membuka halaman Anda di masing-masing browser ini dan mengevaluasi bagaimana elemen Anda muncul. Idealnya, tidak akan ada banyak perbedaan dalam presentasi, tetapi Anda tidak dapat mengetahui dengan pasti sampai Anda melihatnya sendiri.
6. Aksesibilitas
Tujuan dari aksesibilitas web adalah membuat situs web yang dapat digunakan siapa saja, termasuk penyandang disabilitas atau keterbatasan yang mempengaruhi pengalaman menjelajah mereka. Sebagai perancang situs web, tugas Anda adalah memikirkan pengguna ini dalam paket UX Anda.
Seperti daya tanggap, aksesibilitas berlaku untuk seluruh situs Anda: struktur, format halaman, visual, dan konten tertulis dan visual. The Pedoman Web Content Accessibility (WCAG) , yang dikembangkan oleh Web Accessibility Initiative dan World Wide Web Consortium, mengatur pedoman untuk aksesibilitas web. Dalam arti luas, pedoman ini menyatakan bahwa situs web harus:
Dapat dipahami: Pengunjung mengetahui konten di situs Anda.
Dapat Dioperasikan: Fungsionalitas situs web Anda harus dimungkinkan dengan cara yang berbeda.
Dapat dimengerti: Semua konten dan peringatan dapat dengan mudah dipahami.
Kuat: Situs web Anda dapat digunakan di berbagai teknologi bantu, perangkat, dan browser.
7. Konvensionalitas
Tantangan besar dalam desain web adalah menyeimbangkan orisinalitas dengan harapan Anda. Sebagian besar dari kita adalah pengguna internet ahli, dan ada konvensi khusus yang telah kita terbiasa dari waktu ke waktu. Konvensi tersebut meliputi:
Menempatkan navigasi utama di bagian atas (atau sisi kiri) halaman.
Menempatkan logo di kiri atas (atau tengah) halaman.
Membuat logo dapat diklik, sehingga selalu membawa pengunjung kembali ke beranda.
Memiliki tautan dan tombol yang berubah warna/tampilan saat Anda mengarahkan kursor ke atasnya.
Menggunakan ikon keranjang belanja di situs e-niaga. Ikon tersebut juga memiliki lencana nomor yang menandakan jumlah item di dalam troli.
Memastikan penggeser gambar memiliki tombol yang dapat diklik pengguna untuk memutar slide secara manual.
Sementara beberapa mungkin memilih untuk membuang ini keluar jendela demi keunikan, ini adalah kesalahan. Masih ada banyak ruang untuk kreativitas dalam batasan konvensionalitas web.
Mari kita pertimbangkan secara singkat bidang desain lainnya, arsitektur. Kode bangunan diberlakukan sehingga orang dapat dengan mudah dan aman menghuni ruang. Seorang arsitek tidak mengeluh tentang kode ini atau melanggarnya karena, selain akibat hukum, mereka menjamin keamanan dan kenyamanan tamu. Tidak peduli seberapa memesona bangunan itu — jika Anda tersandung tangga yang tidak rata atau Anda tidak dapat keluar dari api, Anda mungkin lebih memilih untuk tetap berada di luar.
Dengan cara yang sama, Anda dapat membuat pengalaman yang tak terlupakan sambil memenuhi harapan pengguna. Jika Anda melanggar apa yang diantisipasi pengguna, mereka mungkin merasa tidak nyaman atau bahkan frustrasi dengan situs Anda.
8. Kredibilitas
Berpegang teguh pada konvensi web memberikan kredibilitas situs Anda. Dengan kata lain, ini meningkatkan tingkat kepercayaan yang disampaikan situs Anda. Dan jika Anda berusaha membangun situs yang memberikan pengalaman pengguna sebaik mungkin, kredibilitas akan sangat membantu.
Salah satu metode terbaik untuk meningkatkan kredibilitas Anda adalah menjadi jelas dan jujur tentang produk atau layanan yang Anda jual. Jangan membuat pengunjung menggali puluhan halaman untuk menemukan apa yang Anda lakukan. Jadilah yang terdepan di beranda Anda, dan dedikasikan beberapa real estat untuk menjelaskan nilai di balik apa yang Anda lakukan.
Kiat kredibilitas lain: Miliki halaman harga, juga ditautkan di beranda. Daripada memaksa orang untuk menghubungi Anda untuk mempelajari lebih lanjut tentang harga, daftar harga Anda dengan jelas di situs Anda. Ini membuat bisnis Anda tampak lebih tepercaya dan sah.
9. Pusat-Pengguna
Pada akhirnya, kegunaan dan pengalaman pengguna bergantung pada preferensi pengguna akhir. Lagi pula, jika Anda tidak mendesain untuk mereka, untuk siapa Anda mendesain?
Jadi, sementara prinsip-prinsip yang dirinci dalam daftar ini adalah titik awal yang bagus, kunci terakhir untuk meningkatkan desain situs Anda adalah dengan melakukan pengujian pengguna, mengumpulkan umpan balik, dan menerapkan perubahan berdasarkan apa yang telah Anda pelajari.
Dan jangan repot-repot menguji kegunaan sendiri. Anda telah menginvestasikan banyak waktu ke dalam desain Anda, yang membawa bias Anda sendiri ke dalam persamaan. Dapatkan penguji yang belum pernah melihat situs Anda sebelumnya, sama seperti pengunjung pertama kali.
Berikut adalah beberapa alat pengujian pengguna untuk membantu Anda memulai:
Website Grader : Alat gratis kami mengevaluasi situs web Anda berdasarkan beberapa faktor: seluler, desain, kinerja, SEO, dan keamanan. Kemudian menawarkan saran yang disesuaikan untuk perbaikan. Anda dapat mempelajari lebih lanjut tentang Website Grader di posting blog khusus kami .
Crazy Egg : Lacak beberapa domain dalam satu akun dan temukan wawasan tentang kinerja situs Anda menggunakan empat alat intelijen yang berbeda — peta panas, peta gulir, hamparan, dan confetti.
Loop11 : Gunakan alat ini untuk membuat tes kegunaan dengan mudah bahkan jika Anda tidak memiliki pengalaman HTML.
Pengguna Mabuk : Bayar Richard Littauer untuk mabuk dan meninjau situs Anda. Tidak percaya padaku? Kami mencobanya .
Untuk opsi yang lebih bermanfaat, lihat daftar alat pengujian pengguna terbaik kami .
Semoga panduan ini bermanfaat dalam menginformasikan struktur halaman web dan situs web Anda secara keseluruhan. Namun, bagaimana cara menerapkan pedoman ini? Mari kita lihat beberapa praktik terbaik yang dapat ditindaklanjuti yang dapat Anda ikuti selama proses desain.