HOTLINE

(0275) 2974 127

CHAT WA 24/7
0859-60000-390 (Sales)
0852-8969-9009 (Support)
Blog

Kesalahan Desain Web Yang Harus Dihindari

Alasan Pentingnya Desain Web

Berikut beberapa alasan pentingnya web design bagi pengunjung ataupun pemilik situs :

  • Menyajikan visual yang oke dan menjawab kebutuhan.

Design web menarik dan fungsional, sehingga menjawab kebutuhan pengunjung. Misal, menggunakan icon keranjang untuk berbelanja, icon social media untuk link sharing, dsb.

  • Memanjakan User Experience.

Memberikan user journey yang ringan, to the point dan mudah diakses. Misalnya navigasi menu sederhana.

  • Meningkatkan konversi.

Desain web mempermudah alur konversi dan menggiring pengunjung melakukan action yang diharapkan. Contohnya, pembelian, berlangganan newsletter, dll.

  • Meroketkan kecepatan website.

Design cukup berdampak terhadap page speed. Karena tiap dekorasi harus dirancang setepat dan seefisien mungkin sehingga tidak menghambat page speed.

Kesalahan Terbesar Desain Web yang Menghancurkan Website

Berikut adalah kesalahan desain web yang bisa menghancurkan website, yaitu :

1. Tidak punya target pasar dan niche

Mendesain web tanpa tahu target pasar dan niche memungkinkan seluruh design gagal dari awal. Sebab, seluruh komponen dibuat tanpa tujuan dan pertimbangan yang jelas.

“Target pasar adalah sekelompok orang yang menjadi target penjualan produk. Sedangkan niche yaitu segmentasi pasar yang lebih mengerucut.”

Web tanpa target pasar dan niche membuat desain seperti tidak punya arah. Produk yang dijual juga kesannya campur aduk. Sehingga susah mengundang pelanggan potensial.

Berikut ini beberapa hal agar tidak salah target :

  • Ketahui tujuan membuat website (konversi, engagement, papan informasi, dll).

Mengetahui tujuan memudahkan memikirkan elemen yang website perlukan.

  • Pahami kriteria target pasar.

Target pasar membantu mengetahui karakter web yang pas.

  • Pasang goals yang terukur (conversion rate, traffic, bounce rate, dll).

Goal yang bisa diukur akan memudahkan proses evaluasi web.

  • Manfaatkan tools seperti Google Analytic, Traffic Checker, dll.

Tools tersebut membantu menarik data performa web.

  • Lakukan A/B Testing untuk mengetahui desain web yang paling ideal bagi kebutuhan target audiens.

A/B Testing adalah eksperimen untuk melihat variabel mana yang memberi hasil terbaik.

2. Salah pilih tipografi

Tipografi adalah seni memilih dan menata font pada suatu ruang sehingga menciptakan kesan tertentu. Masih berhubungan dengan poin sebelumnya, target pasar menentukan karakter tipografi.

“Font menyesuaikan brand dan target audiens yang dituju. Banyak web designer yang belum paham penempatan target audiens atau karakter.”

Untuk membantu memilih tipografi yang efektif, perhatikan beberapa kunci sukses tipografi ini :

  • Demografi target audiens.

Kenali target audiens (usia, minat, profesi, dll) sehingga memudahkan memahami karakter font yang tepat. Childish, modern, edgy, atau bentuk lainnya.

  • Keterbacaan.

Teks mudah dibaca, tidak hanya sebagai estetika.

  • Panjang teks dan ukuran font.

Ketahui konten apa yang muncul pada web. Apakah itu artikel berita, informasi produk, atau teks lainnya? Tentunya, tiap komponen butuh ruang dan ukuran font yang sesuai.

  • Hierarki tipografi.

Hierarki tipografi merupakan cara menonjolkan teks sesuai urutan kepentingannya, seperti heading. Sehingga, poin penting teks lebih mudah ditangkap mata.

  • Alignment.

Mengatur posisi dan margin sehingga text berada di garis yang tepat.

  • Whitespace.

Ruang kosong atau jarak di sekitar teks. Membuat teks terlihat lebih lega dan memudahkan user membaca secara scanning.

  • Warna dan kontras teks.

Warna dan kontras mampu membangun kesan tertentu sekaligus memberi highlight pada poin-poin penting dalam teks.

  • Konsistensi font.

Gunakan font yang seragam dan konsisten dalam web. Jika jenis font terlalu beragam, user akan bingung dan melihat web sebagai situs yang kacau.

3. Asal memakai warna

Salah memilih warna adalah akibat lagi yang terjadi jika tidak punya target pasar. Jadi memoles website dengan warna yang tanpa arti. Mendesain web harus paham target pasar dan memadukannya dengan Psikologi Warna. Bangun nuansa situs dengan pilihan warna berikut :

Warna Kesan Cocok Bagi Industri…
Biru Membangun kepercayaan dan ketulusan. Perusahaan tech hingga financial.
Kuning Membangkitkan semangat dan optimisme. Cocok untuk Call-to Action Button atau mengarahkan user ke konversi. Industri pendidikan, organisasi, dll.
Hijau Menciptakan kesan tenang. Industri kesehatan dan makanan.
Oranye Mencerminkan persahabatan dan kreativitas. Daripada sebagai warna dominan, lebih cocok untuk pelengkap. Restoran, perusahaan kartu kredit, dll.
Pink Romansa, feminim, manis. Perusahaan fesyen atau industri yang menargetkan wanita dan anak-anak.
Merah Membangkitkan energi dan hal-hal darurat. Sering dipakai untuk situs restoran.
Ungu Memberi kesan mewah dan kebijaksanaan. Agen konsultan, bisnis parfum, dll.
Putih Minimalis, bersih, hingga ketulusan. Situs berita, e-commerce, dll.
Abu-abu Melambangkan ketenangan, minimalis dan modern. Perusahaan tech, arsitek, fesyen, dll.
Hitam Menunjukkan kekuatan, elegan, hingga kemewahan. Website IT, transportasi, fashion, dll.

4. Media visual sembarangan

Media visual (gambar, video, foto, dll) menjadi hal yang wajib ada di website. Sebab, media visual mudah memikat perhatian pengunjung situs. Bahkan, otak manusia memproses visual 60.000 kali lebih cepat dibandingkan teks.

Namun, ada kalanya saat mendesain web mungkin lebih fokus pada keindahan gambar dan melupakan akibatnya bagi performa website.

Lakukan antisipasi berikut supaya media visual tidak mengganggu performa website :

  • Gunakan format media visual yang sesuai.

Seperti JPEG untuk berbagai gambar fotografi atau yang lebih ringan lagi dengan Google WebP.

  • Pastikan ukuran gambar tepat. 

Ketahui ukuran panjang dan lebar device yang akan menampilkan web dan konten. Agar, bisa menentukan rasio gambar yang cocok untuk berbagai jenis device.

  • Compress.

Susutkan besar file gambar dan hapus meta data yang tidak perlu dengan berbagai tools compressor (TinyJPG, Image Optimizer, plugin Imsanity, dll) agar tidak banyak menyita ruang penyimpanan.

  • Embed.

Embed adalah kode untuk menarik video dari situs tertentu (seperti YouTube). Sehingga, video dapat tampil di web tanpa memakan ruang simpan.

  • Optimasi gambar.

Supaya gambar mampu membantu web agar mudah tampil di mesin pencarian, terapkan SEO Image.

5. Navigasi rumit

Bounce rate tinggi masalahnya adalah karena navigasi yang rumit. Faktanya, 61,5% pengunjung meninggalkan web yang punya navigasi buruk.

“Navigasi website adalah fungsi yang memungkinkan user menjelajahi isi  situs. Baik untuk menemukan informasi, melakukan pembelian, ataupun mengarah ke halaman lain.”

Tanpa navigasi yang oke, user akan kesulitan menjelajahi website. Misalnya, pilihan menu terlalu banyak, tidak tertata, teks terlalu panjang, dll.

Berikut ini tips desain  navigasi yang simple dan berguna :

  • Posisikan navigasi di tempat yang mudah ditemukan.

Bisa di bagian atas (header), kaki website (footer), sisi samping (sidebar), atau kombinasi.

  • Pastikan navigasi responsive. 

Navigasi berfungsi dengan baik saat user mengaksesnya lewat berbagai device (desktop, mobile, tablet).

  • Atur sticky navigation yang bisa sembunyi otomatis. 

Sticky navigation memungkinkan user bisa mengakses menu tanpa repot scroll. Tapi sebaiknya navigasi sembunyi otomatis saat tidak dipakai, sehingga tampilan web tetap luas.

  • Pasang menu yang prioritas.

Pastikan menu hanya berisi hal penting yang user butuhkan. Seperti profil, kontak, hingga layanan.

  • Sajikan item menu secukupnya.

Terlalu banyak pilihan hanya akan membingungkan user.

  • Gunakan teks/icon deskriptif. 

Tidak perlu menggunakan copy writing yang terlalu puitis. Pakai saja istilah atau icon yang mudah user pahami. Seperti Sign Up, Cart, Search, dll.

  • Pertegas teks/icon navigasi.

Buat perbedaan jelas antara teks navigasi dengan isi website. Sehingga, user mudah mengidentifikasi navigasi.

6. Call-to action button tidak menarik dan salah posisi

Call-to-Action atau CTA punya fungsi yang berbeda dari tombol navigasi. Meskipun sama-sama bisa diklik, CTA punya pengaruh langsung ke konversi. Sedangkan navigasi sebatas membantu user membuka halaman website.

“CTA Button adalah teks (bisa berupa teks dengan link ataupun tombol pada website) yang bisa diklik untuk mengajak pengunjung melakukan sesuatu. Contohnya: Beli Sekarang, Download, Baca Selengkapnya, dll.”

Berikut ini cara membuat CTA Button yang efektif :

  • Sediakan pilihan jawaban dan tonjolkan mana yang lebih penting. 

Agar terkesan tidak memaksa user, sediakan pilihan jawaban seperti Ya dan Tidak. Namun, highlight opsi tombol yang diharapkan user pilih.

  • Desain CTA agar tampil menawan. 

Mulai dari ukuran tombol, border, jenis font, hingga hal-hal mendetail lainnya.

  • Berikan efek Hover States.

Hover States adalah ketika elemen tampak berubah saat disentuh cursor. Ini akan memberitahu user bahwa elemen bisa diklik.

  • Gunakan kalimat perintah.

Buat instruksi yang jelas agar audiens mau mengikuti petunjuk.

  • Bermain dengan kreativitas.

Gunakan copy writing yang ringkas namun menggoda. Seperti “Hidup sehat dimulai sekarang!”.

  • Tonjolkan manfaat. 

Fokus dengan apa yang akan user dapatkan setelah mengklik tombol.

  • Batasi penawaran. 

Terapkan strategi FOMO (Fear of Missing Out) untuk menciptakan kesan darurat sehingga audiens segera melakukan action.

  • Posisikan CTA Button pada lokasi yang strategis.

Tombol CTA harus tampil mencolok, mudah ditemukan, dan ada pada setiap halaman web yang penting.

7. Website layout berantakan

Tahukah bahwa hanya butuh 0.05 detik bagi visitor untuk memutuskan akan pergi atau bertahan pada website.

“Website layout adalah kerangka yang mengatur tata letak navigasi, tombol CTA, dan elemen lainnya pada website.”

Tanpa layout yang baik, user akan kesulitan menjelajahi website. Mereka juga susah menangkap info yang ingin disampaikan.

Supaya tidak jatuh dalam kesalahan dalam mendesain web ini bisa mengupayakan hal berikut :

  • Pelajari dan buat hirarki visual.

Hirarki visual adalah konsep untuk menyetir perhatian audiens. Tujuannya untuk menunjukkan hal penting terlebih dahulu.

  • Gunakan struktur dasar website. 

Buat halaman yang biasanya ada pada website, seperti Beranda, Kontak, Layanan, dll. Sehingga, user akan merasa familiar dengan fungsi web.

  • Pilih jenis website layout yang sesuai. 

Tentukan tujuan situs. Jika konversi, taruh landing page pada bagian depan. Namun berbeda jika tujuan web sebagai papan informasi, di mana barisan konten sebaiknya tampil pada halaman utama.

  • Buat navigasi yang simple.

Navigasi harus sederhana dan mudah user gunakan.

  • Posisikan setiap komponen web secara terorganisir. 

Atur letak navigasi, konten, tombol, dll sehingga terlihat rapi dan mudah user ikuti.

  • Ikuti perkembangan trend web design. 

Website layout seringkali berkembang, mengikuti kebutuhan dan tingkah laku user yang berubah.

  • Pelajari berbagai teori design. 

Teori design seperti Hukum Gestalt, Rule of Thirds, Hukum Hick, dll akan membantu memahami psikologi manusia saat menggunakan website.

8. Kurang memahami HTML/CSS

Saat mendesain web, ada kalanya tidak sendiri. Terkadang, butuh berkolaborasi dengan web developer. Bedanya web designer bertugas membuat tampilan website dengan pendekatan UX. Layout, visual, grafis, dll.

Sedangkan web developer bertanggung jawab terhadap semua hal di belakang layar. Termasuk performa situs, serta  logika dan bagaimana tiap komponen web bekerja.

Sayangnya, dalam membangun tampilan website terkadang desain dirancang suka-suka tanpa memikirkan apakah mungkin dieksekusikan. Alhasil, web yang rilis beda jauh dari desain.

“Problem yang sering dihadapi, ketika design sudah di hand-over, web developer mengalami kesusahan dalam proses development. Penting untuk memikirkan sejauh apa teknologi yang akan dipakai dan bagaimana kemampuan dari web developer.”

Untuk memudahkan kolaborasi dengan web developer, web designer perlu memahami basic coding front-end. Seperti HTML/CSS. HTML dan CSS adalah bahasa markup untuk membuat tampilan yang bisa diakses melalui browser.

Berikut cara belajar HTML dan CSS :

  • Pelajari kerangka inti HTML.

Bisa memulai belajar dengan memahami struktur dasar halaman website dalam HTML.

  • Ketahui basic coding HTML dan CSS. 

Mengetahui basic coding HTML dan CSS akan memudahkan memahami code yang lebih rumit.

  • Buat atau modifikasi template HTML/CSS sesuai kebutuhan.

Coba praktik dengan membuat ataupun memodifikasi template HTML/CSS.

  • Kembangkan kemampuan dengan coding yang lebih ringkas.

Ikuti perkembangan web development agar bisa merancang web dengan code yang lebih bersih, seperti HTML5.

9. Web tidak responsive

73,1% pengunjung meninggalkan web dengan desain non-responsif. Sebelum mengetahui alasannya, sebaiknya memahami dulu apa itu website responsive.

“Website responsive adalah website yang mampu menyesuaikan layout saat tampil di berbagai jenis device (desktop, mobile, tablet) dengan ukuran layar berbeda.”

Tanpa desain responsive, website akan tampil dalam versi yang tidak seharusnya. Jadi sebelum kehilangan pengunjung, pastikan buat web design yang responsive. Caranya :

  • Pakai atau buat template yang responsive.

Bisa menggunakan template responsive siap pakai atau membuat tema responsive dengan HTML dan CSS.

  • Pelajari bagaimana user menggunakan web di berbagai device.

Ketahui fungsi apa saja yang paling user butuhkan baik pada desktop, mobile, ataupun tablet.

  • Optimasi gambar.

Ukuran gambar harus mampu fleksibel mengikuti tipe device.

  • Pastikan navigasi tampil oke di setiap jenis device.

Tampilan pada mobile tentu lebih kecil daripada desktop ataupun tablet. Jadi, sesuaikan navigasinya. Memakai hamburger navigation, misalnya.

  • Desain tombol agar mudah diklik meski di layar kecil.

Tombol harus mencolok dan mudah diklik. Bisa dengan mendesainnya dalam bentuk kotak atau oval.

  • Gunakan tools cek website responsive.

Periksa apakah situs sudah responsive dengan berbagai tools cek website responsive.

10. Cuek dengan SEO web

SEO (Search Engine Optimization) adalah upaya optimasi yang memungkinkan website mendapat ranking teratas di hasil pencarian. Salah satu yang bisa dioptimasi yaitu desain web itu sendiri.

“SEO website design adalah pembuatan design website yang mengikuti kaidah SEO sehingga mudah ditemukan di mesin pencari.”

Lakukan beberapa trik ini untuk membangun SEO website design :

  • Lakukan page slicing.

Page slicing adalah membagi komponen website menjadi bagian kecil. Sehingga, proses optimasi lebih maksimal. Misalnya, mengiris background yang punya motif sama dan dipakai berulang. Alhasil, page loadnya lebih cepat daripada menggunakan gambar versi utuhnya.

  • Atur layout website.

Seluruh navigasi hingga konten harus terorganisir agar mudah dipahami user.

  • Buat sitemap website.

Sitemap adalah daftar halaman website yang bisa user akses dan akan ditampilkan search engine. Ini mempermudah Google mengindeks situs.

  • Hanya gunakan satu H1 pada setiap halaman web.

Heading 1 berfungsi sebagai judul utama halaman website. Supaya Google tidak bingung dengan inti website cukup pasang satu H1 saja di tiap halaman web.

  • Pastikan tema website mobile-friendly.

Website mobile-friendly adalah website yang dioptimasi untuk perangkat mobile. Faktanya, Google lebih suka mengindeks situs yang mobile-friendly.

  • Kecepatan website harus oke.

Faktanya, Google memberikan halaman pertamanya bagi website yang page speed-nya mendekati 1,65 detik.

5/5 - (2 votes)
Risa Y

Recent Posts

Mengenal Manfaat GPN Dari Filosofi Logonya!

Apakah Anda menggunakan kartu ATM atau kartu debit? Suka bertransaksi secara cashless? Sepertinya Anda perlu…

1 day ago

Ingin Membuat Website E-Commerce Yang Menarik? Perhatikan Tips Ini

Design website toko online tidak hanya soal estetika, tapi juga UX yang bagus secara keseluruhan.…

2 days ago

Apa Saja Jenis Proyek yang Bisa Dikerjakan UX Designer? Yuk Simak Di Sini

Sebelum memulai karir Anda sebagai desainer UX, Anda harus membuat portofolio yang mencakup semua pengalaman…

3 days ago

Aktifkan Keep-Alive Untuk Meningkatkan Performa Website Anda

Keep-Alive memungkinkan browser pengunjung Anda mendownload semua konten (JavaScript, CSS, gambar, video, dll) melalui koneksi…

4 days ago

Baca Ini Untuk Pelajari Apa Saja Job Description Web Developer

Job description seorang web developer adalah membuat situs web menggunakan berbagai bahasa pemrograman. Tanggung jawab…

5 days ago

Rekomendasi Tools A/B Testing untuk Meningkatkan Conversion Rate

Secara default, WordPress tidak mendukung A/B testing. Tapi jangan khawatir. Di bawah ini, kami telah…

6 days ago