15 Contoh Website yang Buruk dari Segi Fungsi & Desain

15 Contoh Website yang Buruk dari Segi Fungsi & Desain

Performa website bisa dipengaruhi oleh banyak faktor, salah satunya adalah desain keseluruhannya. Siapa, sih, yang tidak senang mengunjungi website yang desainnya bagus? Namun, baik buruknya desain bisa sangat subjektif.

Oleh karena itu, Anda bisa mempelajari dulu seperti apa contoh website yang buruk dan aspek desain yang harus dihindari untuk merancang website yang tak hanya bagus dari segi tampilan, tapi juga berfungsi optimal.

Di artikel ini, kami akan menjelaskan ciri-ciri website yang buruk untuk membantu Anda menghindari kesalahan desain web yang umum terjadi. Nantinya, Anda pun bisa menyempurnakan website Anda dan menyajikan pengalaman pengguna yang lebih baik.

Apa Ciri-Ciri Website yang Buruk?

Website yang buruk adalah website yang gagal memenuhi ekspektasi pengunjung, memiliki navigasi yang buruk, atau menyajikan pengalaman pengguna yang tidak sesuai standar.

Selain itu, website seperti ini memiliki banyak aspek desain yang kurang baik, mulai dari loading yang lambat dan tata letak yang tidak responsif hingga antarmuka yang berantakan dan branding yang tidak konsisten.

15 Contoh Website yang Buruk dan Harus Dihindari

Di artikel ini, kami akan membahas 15 contoh website yang buruk dari segi desain, yang diambil dari website fiktif bernama The Bad Website.

Kami akan menjelaskan hal-hal apa saja yang membuatnya dianggap buruk dari segi desain, serta memberikan tips peningkatan untuk membantu Anda membuat website yang baik.

Perlu diingat bahwa website yang buruk berbeda dengan website yang aneh atau unik. Sebab, website-website aneh nan unik biasanya memang dirancang untuk terlihat ‘nyeleneh’. Kalau mau tahu contohnya, silakan lihat artikel kami lainnya yang membahas tentang berbagai website aneh namun menghibur.

1. Navigasi yang Buruk

Salah satu contoh website yang buruk adalah navigasinya yang juga buruk, menyulitkan pengunjung untuk menemukan produk atau informasi yang mereka butuhkan. Misalnya, website tidak memiliki kategori atau label yang jelas sehingga membingungkan pengguna. Sayangnya, hal ini masih umum terjadi.

menu navigasi pada contoh website yang buruk

Pengunjung mungkin akan merasa seperti terjebak dalam labirin yang berisi daftar produk tanpa urutan logis. Misalnya, tidak ada link atau bagian yang secara khusus dibuat untuk kategori produk tertentu, seperti elektronik atau kecantikan.

Calon pelanggan pun akhirnya harus mengklik berbagai halaman tanpa tujuan dan arah yang jelas. Hal ini akan berujung pada bounce rate yang lebih tinggi, dan akhirnya website bisa kehilangan banyak potensi transaksi.

Tips Peningkatan:

Salah satu langkah perbaikan penting untuk masalah seperti ini adalah membuat struktur menu yang jelas dan intuitif. Buat kategori yang tertata dengan baik untuk mewakili berbagai jenis produk yang disediakan. Pastikan menu mudah diakses dan ditampilkan dengan jelas di setiap halaman sehingga pengguna bisa menelusuri website dengan mudah.

Selain menu, breadcrumb juga bisa sangat membantu pengguna untuk memahami lokasi mereka saat ini dalam hierarki website. Dengannya, mereka bisa kembali ke halaman sebelumnya dengan lebih mudah. Fitur ini meningkatkan fungsi website secara keseluruhan dan memudahkan pengguna menemukan hal yang mereka cari.

Terakhir, pertimbangkan untuk menggunakan tool analisis heatmap seperti Hotjar atau Crazy Egg. Tool ini menyajikan data visual tentang interaksi pengunjung di website Anda, menunjukkan area yang paling banyak diakses pengunjung dan masalah fungsi yang berpotensi muncul.

homepage hotjar sebagai rekomendasi tool untuk analisis website

Dengan menganalisis data ini, Anda bisa mencari tahu berbagai faktor yang memengaruhi navigasi website dan menemukan cara untuk mengoptimalkannya.

2. Loading yang Lambat

Masalah lain yang umum terjadi pada contoh website yang buruk adalah loading yang lambat. Kecepatan website yang buruk bisa memengaruhi kesuksesan website di internet karena berhubungan dengan banyak aspek penting.

Loading yang ideal untuk website yang baik adalah kurang dari dua detik. Apabila lebih lama, pengunjung kemungkinan akan langsung meninggalkan website.

Dalam kasus The Bad Website, ada banyak halaman dengan gambar berukuran besar yang tidak dioptimalkan sehingga memperlambat loading website. Pengunjung harus menunggu dan mengalami penundaan untuk melihat konten website, dan akhirnya mereka pun memilih untuk mencari alternatif yang lebih cepat.

Tips Peningkatan:

Optimasi ukuran dan format gambar website bisa menjadi solusi yang tepat. Untungnya, gambar di website bisa dikompresi tanpa mengorbankan kualitasnya. TinyPNG adalah contoh tool gratis yang bisa mengoptimalkan gambar untuk website.

homepage tinypng untuk mengompresi ukuran gambar

Atau, gunakan pedoman ukuran gambar umum sebagai acuan. Berikut adalah beberapa rekomendasi ukuran gambar yang akan berfungsi dengan baik di desktop dengan ukuran layar 1080p.

Jenis GambarDimensi Gambar (P x L)Rasio Aspek
Gambar Latar Belakang1920 x 1080 piksel16:9
Hero Image1280 x 720 piksel16:9
Gambar Blog1200 x 630 piksel3:2
Logo (persegi)100 x 100 piksel1:1
Gambar Mini (Thumbnail)150 x 150 piksel1:1

Selain itu, format gambar yang efisien seperti JPEG atau WebP bisa secara signifikan mempercepat waktu loading website. Dengan demikian, pengunjung pun bisa menikmati konten website dengan lebih baik.

Anda juga bisa menerapkan caching untuk mempercepat loading website lebih lanjut. Manfaatkan cache browser untuk menyimpan elemen website statis seperti gambar, CSS, dan file JavaScript di perangkat pengguna.

Nantinya, saat mereka mengunjungi website Anda lagi, loadingnya akan lebih cepat karena browser bisa mengambil elemen-elemen ini dari cache saja tanpa perlu mendownloadnya lagi dari server.

Saran Bacaan

Ingin mempelajari langkah-langkah pengoptimalan website lebih lanjut? Simak tutorial kami lainnya tentang cara optimasi website.

Jangan lupa untuk mengecek kecepatan loading website Anda menggunakan tool seperti PageSpeed Insights. Atau, kalau menggunakan layanan hosting dari Hostinger, Anda bisa mengecek performa website secara langsung di hPanel.

3. Desain Tidak Responsif

Desain yang tidak responsif dan kurang optimal di perangkat seluler juga merupakan contoh website yang buruk. Masalah ini menyulitkan pengunjung untuk melihat-lihat produk atau melakukan pembelian saat menggunakan HP atau tablet.

Website dengan desain seperti ini tidak bisa menyesuaikan tampilannya di berbagai ukuran layar, menyebabkan tata letaknya terdistorsi, elemennya salah ditempatkan, dan pengalaman penggunanya terganggu di perangkat seluler.

Jadi, sebaiknya website tidak hanya dioptimalkan untuk satu jenis perangkat. Menurut Statista, perangkat seluler menyumbang lebih dari 50% traffic web di seluruh dunia. Hal ini berarti The Bad Website bisa kehilangan sekitar separuh calon pelanggan karena tidak mobile-friendly.

Tips Peningkatan:

Saat mendesain website, sebaiknya prioritaskan desain yang mobile-friendly untuk memastikan pengalaman browsing yang lancar di semua perangkat.

Contohnya, The Bad Website bisa menggunakan CSS breakpoint dan kueri media untuk menentukan gaya dan tata letak yang berbeda serta meningkatkan respons di perangkat seluler. Menggunakan kueri media, website bisa menyesuaikan desain dan fungsinya berdasarkan breakpoint tertentu untuk menghadirkan pengalaman yang lancar dan konsisten di berbagai perangkat.

Selain itu, pastikan website Anda didesain untuk memprioritaskan perangkat seluler sejak awal. Dengan mengutamakan perangkat seluler dulu lalu menyempurnakan desainnya untuk ukuran layar yang lebih besar, website Anda pun bisa mengakomodasi berbagai jenis pengunjung.

Anda bisa mencoba menggunakan framework responsif seperti Bootstrap yang mempermudah proses pengembangan website dengan komponen responsif siap pakai dan sistem grid yang disediakannya.

Kemudian, pastikan untuk menguji website di berbagai perangkat dan browser guna memastikan respons yang konsisten.

Apabila ingin mencoba solusi lainnya, website builder dari Hostinger juga bisa menjadi pilihan yang sangat baik. Dengan platform ini, Anda bisa membuat website yang mobile-friendly tanpa perlu repot dengan hal-hal teknis atau coding yang rumit.

4. Media Diputar secara Otomatis

Audio atau video yang diputar secara otomatis tanpa kontrol pengguna juga bisa menjadi ciri-ciri website yang buruk, lho. Dalam contoh The Bad Website, pengunjung akan langsung melihat video yang menampilkan gadget terbaru di homepage dengan musik yang keras

Mungkin, niatnya adalah agar website menjadi lebih menarik dan interaktif. Namun, tanpa disadari elemen-elemen tersebut malah cukup mengganggu. Media yang diputar secara otomatis bisa berdampak negatif pada pengalaman browsing dan kesan yang dirasakan pengunjung.

Parahnya lagi, beberapa halaman web mengharuskan pengunjung mendownload file secara otomatis tanpa diminta.

Tips Peningkatan:

Hindari pemutaran audio atau video secara otomatis agar tidak mengganggu pengalaman pengunjung website. Atau, sediakan tombol atau indikator pemutaran yang jelas agar pengunjung bisa memutar media sendiri.

Dengan demikian, pengunjung bisa memilih apakah ingin berinteraksi dengan konten media atau tidak. Hasilnya, Anda pun turut menghadirkan pengalaman yang lebih memprioritaskan pengguna.

Website juga bisa dibilang buruk kalau terlalu banyak menggunakan animasi, mencerminkan desain yang sudah ketinggalan zaman. Elemen ini memang bisa membuat website tampak lebih menarik, tapi biasanya justru malah mengganggu dan akan berdampak negatif pada performa website.

Jadi, saat menambahkan elemen media seperti video dan animasi, pastikan elemen tersebut memiliki tujuan yang jelas, relevan, dan bermanfaat bagi pengunjung. Hindari elemen yang berlebihan atau mengganggu, yang justru mengakibatkan distraksi dari konten atau membebani pengguna.

Perlu diingat juga bahwa media berukuran besar bisa memperlambat website. Oleh karena itu, sebaiknya gunakan media besar secukupnya saja dan optimalkan file tersebut sebelum ditambahkan ke website.

5. Huruf Tidak Terbaca atau Tipografi Buruk

Hal lain yang menyebabkan The Bad Website dianggap sebagai contoh website yang buruk adalah teks yang sulit dibaca, terutama karena gaya font yang digunakan berbeda-beda, kurang jelas, dan memiliki skema warna yang tidak selaras.

contoh website yang buruk dari segi tipografi

Desain seperti ini menyulitkan pengunjung untuk membaca informasi, deskripsi produk, atau mengakses navigasi website. Akibatnya, pengalaman pengguna website pun akan turun drastis, lalu bounce rate akhirnya meningkat.

Masalah pertama yang mengakibatkan buruknya penyajian teks pada website tersebut adalah terlalu banyak jenis huruf yang digunakan.

Penggunaan font yang tidak konsisten mengakibatkan visual website tampak membingungkan, menyulitkan pengguna membedakan judul, teks, dan elemen penting lainnya. Kurangnya keseragaman ini mengganggu alur penyajian informasi secara alami.

Font yang tidak terbaca karena terlalu kecil, terlalu dekoratif, atau kurang kontras dengan latar belakang juga bisa membuat mata pengguna lelah sehingga menyulitkan mereka memahami informasi yang disajikan.

Tips Peningkatan:

TechGizmo bisa menjadi contoh yang baik dalam mengatasi masalah penyajian teks meskipun menggunakan font dekoratif. Website tersebut tidak terlalu banyak menggunakan font yang berbeda untuk menciptakan pengalaman visual yang lebih konsisten.

Anda bisa memilih beberapa font yang saling melengkapi pada judul, subjudul, dan teks konten untuk membuat hierarki yang jelas dan mempermudah pembacaan teks. Biasanya, web designer profesional hanya menggunakan tiga jenis huruf di satu website untuk menjaga konsistensi.

Pilih jenis font yang mudah dibaca dan berikan jarak yang pas agar teks tampak lebih jelas. Perhatikan ukuran font lalu sesuaikan dengan tingkat kenyamanan membaca di berbagai perangkat. Selain itu, pilih tipografi yang bersih, simpel, dan cocok untuk branding website.

Beberapa font yang paling umum dan serbaguna yang bisa Anda gunakan adalah Roboto, Libre Franklin, dan Poppins. Anda bisa mendapatkan font-font ini dari website Google Fonts dan melihat tampilannya dalam berbagai gaya.

website google fonts menampilkan font dengan jenis poppins

Selain itu, pilihlah skema warna yang mempermudah teks untuk dibaca dan ditampilkan dengan jelas. Sertakan ruang kosong yang cukup di antara setiap elemen sehingga konten bisa lebih mudah dibaca dalam sekilas.

6. Tidak Adanya Fungsi Pencarian

Fungsi pencarian bisa sangat membantu pengunjung dalam mencari produk atau informasi tertentu. Tanpa kolom pencarian, mereka harus secara manual menelusuri dan mengklik setiap bagian website, yang mungkin terasa membuang-buang waktu.

Tidak adanya fitur pencarian juga memaksa pengunjung untuk hanya mengandalkan menu navigasi atau scrolling halaman web secara manual, menyulitkan mereka untuk mengakses website.

Tips Peningkatan:

Berkaca dari kasus The Bad Website, Anda bisa menambahkan fungsi pencarian untuk mengatasi masalah ini. Cara terbaiknya adalah dengan menempatkan kolom pencarian di lokasi yang mudah dilihat, seperti di navigation bar atau header.

Fitur pencarian juga sangat penting untuk website toko online karena memudahkan pelanggan menemukan dan membeli produk yang diinginkan. Hasilnya, alur transaksi pengguna pun jadi lebih baik, yang akhirnya membantu meningkatkan kepuasan pelanggan dan angka konversi.

Apabila memiliki website WordPress, Anda bisa menggunakan plugin seperti SearchWP dan ElasticPress untuk meningkatkan fitur pencarian bawaan WordPress.

searchwp plugin wordpress untuk menambahkan fitur pencarian

7. Pop-Up atau Iklan yang Berlebihan

Penggunaan pop-up yang berlebihan adalah hal yang umum terjadi pada contoh website yang buruk. Banyaknya pop-up ini bisa mengganggu pengalaman browsing pengunjung karena terkesan memaksakan promosi penjualan, diskon, atau langganan newsletter.

Iklan yang tidak relevan atau mengganggu juga bisa berdampak negatif pada pengalaman pengguna website secara keseluruhan. Selain membuat tampilan website tampak berantakan, terlalu banyak iklan yang tidak sesuai juga akan mengaburkan tujuan utama website.

Tips Peningkatan:

Meskipun bisa membantu Anda menghasilkan pendapatan dari website, iklan yang terlalu banyak justru akan membuat pengunjung enggan melakukan transaksi. Jadi, batasi penggunaan pop-up hanya untuk acara atau pengumuman penting, serta evaluasi lagi tujuan dan manfaatnya bagi pengunjung.

Pop-up yang digunakan secara strategis di waktu yang tepat, seperti pada proses checkout atau ketika pengguna akan meninggalkan website, bisa membantu meningkatkan angka konversi website.

Pastikan untuk menampilkan pesan yang jelas dan menarik dalam pop-up, menawarkan imbalan yang relevan, atau informasi yang berguna. Dengan demikian, Anda bisa meningkatkan efektivitas desain dan pengalaman pengguna website agar lebih profesional dan mudah digunakan.

8. Tata Letak Halaman yang Berantakan

Tata letak yang berantakan adalah ciri-ciri website yang buruk, yang bisa secara signifikan memengaruhi pengalaman pengguna dan fungsi website secara keseluruhan.

Halaman web yang tata letaknya berantakan akan menciptakan kesan negatif serta menyulitkan pengunjung mengakses konten website dan memahaminya secara efektif. Selain itu, dalam contoh The Bad Website, penggunaan ruang kosong dalam tata letaknya juga tidak efisien.

Akibatnya, pengunjung mungkin akan terdistraksi dari konten-konten penting website atau malah menutupnya sekalian karena pengalaman browsing yang buruk. Contoh masalah ini juga bisa dilihat di halaman utama The Big Ugly Website, menunjukkan tata letak yang berantakan dan tidak menarik.

homepage the big ugly website dengan tata letak yang berantakan dan warna kontras

Tips Peningkatan:

Ada beberapa cara untuk menciptakan tata letak website yang ringkas namun efektif berdasarkan contoh buruk dari The Bad Website.

Pertama, hindari menyertakan elemen-elemen yang tidak penting dan minimalkan kekacauan visual di website. Sajikan konten yang paling relevan dan penting saja bagi pengunjung.

Kemudian, terapkan metode desain minimalis yang membantu memudahkan pengguna mencerna informasi dan mengakses website.

Buat hierarki yang jelas dalam desain web dengan menyusun konten sesuai tingkat kepentingan dan relevansinya. Gunakan petunjuk visual seperti judul, subjudul, dan ruang kosong untuk menciptakan tampilan yang saling berpadu.

Pertimbangkan untuk menggunakan tata letak website pada umumnya yang sudah terbukti efektif dan user-friendly untuk menyajikan konten. Landing page Dockyard Social bisa menjadi contoh yang baik untuk desain website satu halaman, yang merupakan salah satu tata letak terpopuler bagi website modern.

landing page dockyard social sebagai contoh tata letak yang baik

Selanjutnya, Anda bisa mencoba melihat beberapa website yang paling banyak dikunjungi di industri Anda. Dari sini, temukan strategi yang tepat untuk menarik target audiens di niche yang sama menggunakan visual yang ideal.

9. Kurangnya CTA yang Jelas

Tombol ajakan bertindak (CTA) yang jelas dan ditempatkan dengan baik akan membantu memaksimalkan efektivitasnya, terutama bagi toko online. Dengan CTA, Anda bisa memandu pengunjung untuk melakukan tindakan yang diharapkan pada website.

Nah, dalam kasus The Bad Website, CTA yang ada justru membingungkan pengunjung yang bermaksud untuk melakukan pembelian.

contoh cta pada the bad website

Tanpa instruksi yang jelas atau petunjuk visual yang intuitif, pengunjung mungkin akan kesulitan untuk melakukan tindakan penting seperti menemukan produk tertentu, menambahkannya ke keranjang, dan melanjutkan pembayaran.

CTA yang tidak dioptimalkan pada contoh website yang buruk ini tentunya mengganggu alur pengguna, dan bisa membuat pengunjung enggan melanjutkan transaksi yang seharusnya diselesaikan.

Tips Peningkatan:

Pastikan tombol CTA memiliki label yang jelas dan deskriptif untuk menyampaikan tindakan yang diinginkan. Contohnya, daripada menggunakan label umum seperti Tertarik?, gunakan label yang memicu tindakan, seperti Beli Sekarang atau Mulai.

Label yang jelas akan memberikan panduan dan pemahaman yang lebih baik tentang tindakan yang diinginkan. Sebagai contoh, Anda bisa melihat landing page Netflix.

landing page netflix sebagai contoh penempatan cta yang baik

Posisikan tombol CTA secara strategis di lokasi yang tampak jelas dan intuitif di seluruh website. Letakkan di tempat yang secara alami langsung dilihat pengguna untuk menemukannya, seperti di bagian hero, di dekat deskripsi produk, atau di akhir bagian penting.

Pastikan CTA terlihat berbeda dan lebih mencuri perhatian dari elemen lain yang ada di halaman, serta gunakan warna yang kontras, ukuran yang sesuai, atau gaya yang jelas untuk menarik perhatian.

Gunakan elemen visual seperti panah atau variasi ukuran guna menekankan pentingnya tombol tersebut.

10. Proses Pendaftaran yang Ribet

Apabila Anda memiliki website dengan fitur pendaftaran akun, Anda bisa menggunakan informasi pengguna untuk berkomunikasi dengan mereka atau menyajikan saran konten yang dipersonalisasi. Namun, pendaftaran yang berbelit-belit bisa membuat calon pelanggan enggan membuat akun atau melakukan pembelian.

Masalah ini ada di The Bad Website karena formulir dan alur pengisian informasinya tidak intuitif. Formulir pendaftaran yang rumit dengan terlalu banyak kolom atau instruksi yang tidak jelas bisa membingungkan pengunjung dan membuat prosesnya menjadi lama.

Hal ini memberikan kesan bahwa website tersebut memiliki fungsi yang buruk, yang berpotensi merusak reputasinya dan menghambat perolehan pelanggan.

Tips Peningkatan:

Sederhanakan formulir pendaftaran dengan menyertakan kolom yang penting saja. Hanya tanyakan informasi yang dibutuhkan untuk membuat dan menyesuaikan akun. Formulir yang panjang dan terlalu mendetail akan merepotkan pengguna dalam menyelesaikan pendaftaran akun.

Pertimbangkan untuk menerapkan teknik pembuatan profil progresif, yang menekankan bahwa informasi lain bisa ditambahkan secara bertahap dari waktu ke waktu.

Perjelas tujuan setiap kolom dan format yang harus digunakan. Tambahkan panduan atau ikon bantuan di samping kolom yang rumit untuk memberikan konteks atau contoh yang lebih jelas.

Selain itu, sediakan opsi untuk mendaftar atau login menggunakan akun media sosial, seperti Facebook atau Google. Hal ini bisa mempermudah proses pendaftaran karena kolom tertentu bisa langsung diisi dengan informasi yang diperoleh dari profil media sosial pengunjung.

halaman login hpanel

User WordPress bisa menggunakan plugin seperti WPForms untuk membuat formulir pendaftaran yang aman dan bisa disesuaikan lebih lanjut.

11. Tidak SEO-Friendly

Selain dari segi desain, The Bad Website adalah contoh website yang buruk karena mengabaikan beberapa strategi SEO penting sehingga sulit ditemukan di mesin pencari. Gambarnya tidak memiliki alt text, dan semua URL website ini memiliki struktur yang buruk.

Selain itu, kontennya tidak menyertakan kata kunci secara strategis untuk membantu mesin pencari mengindeks website secara optimal.

Masalah ini bisa berujung pada peringkat website yang buruk, traffic organik yang menurun, dan hilangnya peluang untuk menjangkau audiens yang lebih luas. Akhirnya, pelanggan baru pun berkurang.

Tips Peningkatan:

Salah satu strategi untuk memaksimalkan SEO website adalah dengan membuat konten yang berkualitas, bermanfaat, dan informatif sesuai minat dan kebutuhan target audiens.

Optimalkan website dengan menyisipkan kata kunci yang relevan, namun pastikan penempatannya tetap terlihat alami dan berguna bagi pembaca. Konten yang menarik akan meningkatkan waktu kunjungan website, menurunkan bounce rate, dan menaikkan peringkat konten di mesin pencari.

Lakukan riset untuk mengidentifikasi kata kunci dan frasa yang relevan dengan konten website dan maksud pencarian target audiens Anda. Untuk riset kata kunci, Anda bisa menggunakan tool seperti Ahrefs dan Semrush.

halaman keywords explorer di website ahrefs

Integrasikan kata kunci secara strategis dalam judul halaman, header, dan konten untuk meningkatkan peluang website mendapatkan peringkat yang lebih tinggi di halaman hasil mesin pencari.

Perhatikan juga meta tag, seperti meta title dan meta description, karena dua elemen ini berperan penting dalam SEO. Anda juga bisa menggunakan tool seperti Yoast untuk mengelola aspek-aspek SEO ini dengan lebih mudah.

The Bad Website memiliki banyak link rusak yang tidak mengarahkan pengguna ke halaman website lain. Saat diklik, link tersebut akan menampilkan error “404 Page Not Found”.

contoh error 404 not found

Saat menjumpai error ini, pengunjung mungkin akan meninggalkan website dan mencari informasi di tempat lain, yang akhirnya menyebabkan bounce rate meningkat dan berkurangnya tingkat keterlibatan.

Banyaknya error 404 yang ditemukan juga menimbulkan kesan bahwa website tidak dikelola dengan baik atau tidak profesional, yang bisa menurunkan kredibilitas branding. Hal ini dianggap sebagai kelalaian, yang menurunkan kepercayaan pengunjung dan membuat calon pelanggan enggan menelusuri website lebih jauh.

Selain itu, beberapa link mengarahkan pengunjung ke website lain tanpa membukanya di tab baru. Hal ini merupakan ciri-ciri website yang buruk karena bisa mengganggu pengalaman browsing pengunjung.

Tips Peningkatan:

Lakukan audit website yang menyeluruh untuk menemukan link yang rusak. Manfaatkan tool seperti Google Search Console atau tool audit website eksternal untuk mencari link yang rusak dan error 404. Proses audit akan membantu Anda mengidentifikasi halaman dan link yang perlu ditangani.

homepage Google Search Console

Kemudian, segera perbaiki link dengan mengedit atau menggantinya dengan URL yang benar. Apabila halaman yang ditautkan sudah tidak ada lagi, pertimbangkan untuk membuat redirect (pengalihan) ke halaman yang relevan dan masih bisa diakses untuk mencegah error 404.

Saat memindahkan atau mengganti nama halaman website, gunakan redirect 301 untuk mengarahkan pengguna dan mesin pencari ke halaman yang baru. Redirect permanen juga memberi tahu mesin pencari bahwa konten telah dipindahkan secara permanen sehingga tidak mengganggu SEO website.

Pantau setiap perubahan yang dilakukan pada website, seperti memperbarui URL, memodifikasi struktur website, atau mengubah struktur konten. Perubahan ini bisa secara tidak sengaja menyebabkan error 404, jadi Anda harus waspada dan menguji website secara menyeluruh setelah mengeditnya.

Pastikan apakah link eksternal berfungsi dengan benar. Website eksternal bisa saja mengubah URL halaman atau menghapus kontennya sehingga mengakibatkan error pada website Anda. Pastikan keakuratan link eksternal secara rutin dan perbarui link tersebut.

13. Aksesibilitas Website Diabaikan

Sebagai contoh website yang buruk, The Bad Website mengabaikan aksesibilitas website sehingga kontennya sulit diakses oleh pengunjung difabel. Desain website yang tidak bisa memenuhi kebutuhan pengunjung yang berbeda-beda ini mungkin menjadikannya kurang inklusif.

Dalam kasus The Bad Website, masalah utamanya adalah tidak adanya alt text pada gambar dan dukungan navigasi keyboard.

Tips Peningkatan:

Tulis alt text yang deskriptif agar semua gambar di website menjadi lebih mudah diakses. Alt text menambahkan konteks dan deskripsi gambar sehingga pengunjung yang menggunakan aplikasi pembaca layar tetap bisa tahu maksud gambar pada website.

Pastikan juga konten memiliki tag judul yang tepat. Hierarki judul yang terstruktur dengan baik akan mempermudah navigasi dan pemahaman konten bagi pengguna aplikasi pembaca layar.

Selain itu, sertakan caption atau keterangan untuk konten video dan audio agar bisa diakses oleh pengunjung yang memiliki gangguan pendengaran. Sediakan transkrip untuk konten multimedia agar pengunjung bisa mengakses informasinya melalui teks.

Jangan lupa, baca Pedoman Aksesibilitas Konten Web internasional yang menjelaskan cara menyajikan konten web yang lebih mudah diakses oleh para penyandang disabilitas.

14. Visual yang Tidak Efektif

Ada banyak gambar dan elemen visual di The Bad Website yang berkualitas rendah dan tidak relevan dengan konten yang disajikan. Gambar seperti ini mengurangi kualitas visual website dan tidak efektif dalam menyampaikan pesan yang dimaksud.

Gambar berkualitas rendah juga mengorbankan estetika website serta mengurangi kredibilitas dan profesionalisme branding.

Gambar-gambar ini sering kali blur, kurang tajam, bahkan pecah sehingga menghasilkan visual yang kurang baik bagi pengunjung. Gambar yang buram juga bisa membuat produk atau layanan tampak tidak menarik, menurunkan minat calon pelanggan untuk membeli produk.

visual yang buruk pada contoh the bad website

Selain itu, penggunaan gambar stok generik secara berlebihan bisa membuat website terkesan tidak autentik. Apabila tidak dipilih dengan cermat atau disesuaikan dengan branding dan konten website, gambar stok bisa membuat website terlihat sangat biasa, bahkan tidak sesuai dengan produk dan layanan yang ditawarkan.

Tips Peningkatan:

Ada beberapa cara untuk mengatasi masalah kualitas gambar guna meningkatkan visual website secara keseluruhan. Misalnya, gunakan gambar berkualitas HD yang tajam, jernih, dan menarik secara visual.

Untuk toko online, ambil foto produk yang bagus dalam cahaya yang optimal. Menggunakan foto HD beresolusi tinggi dengan detail yang tajam akan sangat efektif dalam menarik perhatian pengguna.

Pilih gambar dan elemen visual sesuai tujuan website agar selaras dengan konten lainnya dan mampu meningkatkan pengalaman pengguna. Hindari elemen visual yang hanya bersifat dekoratif, dan gunakan gambar yang bermanfaat serta membuat audiens lebih tertarik terhadap konten website.

Apabila menggunakan gambar latar belakang, pastikan gambar tersebut tidak mengganggu teks atau aksesibilitas website. Pilihlah latar belakang yang lembut, bersih, atau tidak kabur sehingga teks dan konten lainnya terlihat jelas. Kemudian, lakukan pengujian menyeluruh di berbagai perangkat dan ukuran layar untuk memastikan semua teks terlihat jelas dan mudah dibaca.

15. Desain yang Tidak Konsisten

Tampilan visual adalah salah satu aspek pertama yang dilihat pengunjung saat membuka website Anda. Brand Anda mungkin akan terlihat tidak profesional dan kurang tepercaya kalau desain websitenya buruk. Selain itu, desain harus konsisten di seluruh website untuk menjaga identitas branding.

Sayangnya, The Bad Website tidak menerapkan langkah-langkah ini. Keseluruhan desainnya tampak kacau tanpa mengikuti pedoman desain tertentu.

Beberapa halamannya memiliki skema warna yang membingungkan dan tata letak yang buruk. Akibatnya, pengunjung pun tidak betah berlama-lama membuka website. Elemen-elemen penting seperti teks dan tombol CTA juga menggunakan warna yang kurang tepat sehingga sulit dilihat.

Tips Peningkatan:

Cara terbaik untuk menciptakan desain website yang optimal adalah dengan membuat pedoman gaya yang lengkap. Dalam panduan ini, jelaskan font, palet warna, dan elemen desain yang harus digunakan secara konsisten di seluruh desain web Anda.

Rencanakan pedoman ini dengan mempertimbangkan faktor-faktor penting seperti karakteristik brand, misi, dan target audiens. Pilih warna dan bentuk yang mencerminkan faktor-faktor ini dengan baik. Gunakan website seperti Colorhunt untuk memilih palet warna yang bagus untuk desain website Anda.

website colorhunt untuk memilih palet warna website

Pertimbangkan untuk melihat website lain di industri yang sama guna menemukan contoh desain website yang baik. Proses ini juga bisa membantu Anda merancang website yang tidak kalah menarik dari website kompetitor.

Selain itu, kalau mencari opsi desain website yang lebih mudah, Anda tak perlu repot-repot mencari karena website builder Hostinger sudah menyediakan semuanya. Nikmati tool AI untuk membuat palet warna dengan mudah, yang akan membantu Anda menghadirkan desain website yang nyaman dilihat.

Kesimpulan

Di artikel ini, kami sudah membagikan beberapa contoh desain website yang buruk menggunakan website fiktif kami, The Bad Website. Dengan menganalisis contoh-contoh ini dan memahami kesalahan umum desain web yang harus dihindari, Anda pun bisa mulai membuat website dengan desain dan fungsi yang optimal.

Kesalahan yang paling umum ditemukan dalam contoh website yang buruk meliputi:

  • Loading yang lambat
  • Navigasi yang buruk
  • Respons yang buruk di perangkat seluler
  • Skema warna yang tidak konsisten
  • Tata letak halaman yang berantakan dengan sedikit ruang kosong

Memang, perlu waktu dan usaha yang tidak sedikit untuk membuat website yang menarik secara visual dan fungsional. Namun, hasilnya pasti akan sepadan. Selalu terapkan tips terbaik desain website untuk membantu Anda membuat website yang menarik, efektif, dan sesuai dengan tujuan Anda.

Saran Bacaan

Hindari masalah-masalah umum desain website dengan membaca tutorial kami lainnya tentang pembuatan website:

Cara Membuat Website dari Awal
Cara Mendesain Website

Tanya Jawab (FAQ) Ciri-Ciri Website yang Buruk

Di bagian ini, kami akan menjawab beberapa pertanyaan yang paling sering diajukan tentang contoh desain website yang buruk.

Kenapa Harus Memiliki Desain Website yang Bagus?

Desain web yang baik sangat penting karena bisa meningkatkan pengalaman pengguna dan angka konversi, membangun kredibilitas, serta menaikkan peringkat di mesin pencari. Hasilnya, website Anda bisa memberikan kesan yang positif, membangun kepercayaan pelanggan, dan membuat pengunjung betah berlama-lama di website Anda.

Apa Dampak Desain Website yang Buruk bagi Bisnis?

Desain website yang buruk bisa berdampak negatif pada bisnis, seperti menyebabkan bounce rate yang tinggi, menurunkan angka konversi, dan merusak reputasi. Pengguna cenderung menutup website yang desainnya buruk, menyebabkan hilangnya peluang pendapatan dan pelanggan potensial.

Bagaimana Cara Menghindari Contoh Website yang Buruk?

Untuk menghindari desain website yang buruk, prioritaskan pengalaman pengguna, lakukan pengujian fungsi yang menyeluruh, ikuti tren desain saat ini, optimalkan kecepatan website, hadirkan desain yang responsif, gunakan navigasi yang jelas, dan pastikan visual yang konsisten. Dapatkan masukan secara rutin dari pengguna untuk memperbaiki website.

Author
Penulis

Faradilla A.

Faradilla, yang lebih akrab disapa Ninda, adalah Content Marketing Specialist di Hostinger. Ia suka mengikuti tren teknologi, digital marketing, dan belajar bahasa. Melalui tutorial Hostinger ini, Ninda ingin berbagi informasi dan membantu pembaca menyelesaikan masalah yang dialami. Kenali Ninda lebih dekat di LinkedIn.