10 Kesalahan Desain Web Terbesar 2021 Menurut Jakob Nielsen

Jakob Nielsen

A. Pendahuluan

Coba pikir, seberapa sering Dalam dunia desain web, memahami apa yang salah dan harus dihindari adalah langkah penting untuk menciptakan pengalaman pengguna (user experience) yang optimal. Jakob Nielsen, seorang pakar usability terkemuka, membagikan daftar terbaru 10 kesalahan desain web terbesar di tahun 2021 dalam sebuah konferensi virtual. Ini bukan sekadar daftar biasa, melainkan hasil observasi mendalam mengenai bagaimana desain yang buruk dapat menghambat pengguna dalam mendapatkan informasi dan melakukan aktivitas secara efisien.

Nielsen membagi penyebab desain buruk menjadi tiga kategori utama: desain jahat (evil) yang sengaja dilakukan merugikan pengguna; desain bodoh (stupid) yang berasal dari ketidaktahuan; dan desain malas (lazy) yang meskipun diketahui buruk, tidak diperbaiki karena keterbatasan sumber daya. Dengan pengetahuan ini, mari kita telusuri kesepuluh kesalahan desain yang paling prevalen dan merugikan menurut Nielsen.

---

1. Desain Mobile pada Layar Besar
Kesalahan kesepuluh adalah ketika desain yang cocok untuk perangkat mobile diterapkan begitu saja pada layar besar seperti desktop tanpa penyesuaian yang memadai. Desain yang dibuat untuk layar ponsel umumnya menggunakan elemen seperti menu hamburger yang tersembunyi, karena keterbatasan ruang. Namun, saat diterapkan langsung ke layar besar, menu tersebut justru menjadi sulit ditemukan oleh pengguna karena posisinya yang terpencil dan ukurannya sangat kecil secara visual.
Konsep utama di sini adalah "desain sesuai media". Secara matematis, jika ukuran layar desktop adalah L_d dan ukuran layar mobile adalah L_m dengan L_d ≫ L_m, memperbesar elemen-elemen desain mobile secara proporsional tanpa memperbaiki tata letak akan menyebabkan:

Penggunaan Menu ∝

1 L_d

Artinya, semakin besar layar, proporsi perhatian pengguna terhadap ikon tersembunyi akan turun drastis, membuat navigasi menjadi kurang efektif.

2. Gambar Hero Besar di Atas Fold
Kesalahan kesembilan berupa penggunaan satu gambar hero besar yang mengisi seluruh layar bagian atas ("above the fold") sehingga pengguna mendapatkan kesan bahwa semua konten sudah terlihat dan tidak menyadari adanya scroll lebih lanjut. Ini mirip dengan efek splash screen yang populer dekade lalu dan dianggap menghambat interaksi pengguna karena memberi kesan bahwa halaman sudah selesai.
Hal ini melanggar prinsip komunikasi antarmuka yang efektif di mana pengguna harus diberikan beberapa opsi dan petunjuk eksplisit untuk menggali isi konten lebih dalam, bukan disuguhi satu fokus yang tunggal dan besar.

3. Pergeseran Tata Letak Saat Memuat Halaman
Kesalahan kedelapan terkait dengan layout shift, yaitu kondisi di mana komponen halaman tiba-tiba berpindah tempat saat konten baru dimuat. Hal ini bisa dinyatakan dengan:

Shift Layout =

n ∑ i=1

ΔP_i

di mana ΔP_i adalah perubahan posisi elemen ke-i setelah konten tambahan diunduh. Pergeseran ini menciptakan gangguan estetika dan kesalahan klik, karena pengguna berniat mengakses elemen yang tadinya ada di posisi tertentu, tapi mendapati posisi tersebut sudah berganti.

4. Ikon Tanpa Label
Kesalahan ketujuh ialah penggunaan ikon tanpa label yang jelas. Dalam desain user interface, ikon berfungsi sebagai bahasa visual, tetapi arti sebuah ikon bisa sangat kontekstual dan bervariasi antar situs. Tanpa teks penjelas, pengguna bisa merasa ragu untuk mengklik karena tidak mengerti fungsi ikon tersebut.
Prinsip ini dapat dihubungkan dengan teori kognitif bahwa makna ikon harus bersifat mapping yang jelas dan redundansi komunikasi, yakni memadukan simbol visual dengan teks untuk mengurangi ambiguitas.

5. Tidak Bisa Seleksi dan Salin Konten
Kesalahan keenam adalah memblokir fitur seleksi dan copy-paste pada situs, yang biasanya terjadi karena penggunaan JavaScript atau teknik pengamanan berlebihan. Ini merusak salah satu mekanisme integrasi dasar antar aplikasi, yakni penggunaan clipboard sebagai medium transfer data.
Hal ini secara negatif memengaruhi produktivitas pengguna dan dapat menyebabkan hilangnya potensi bisnis karena informasi tidak dapat dengan mudah dibagikan ke kolega atau digunakan untuk referensi.

6. Input Data yang Kaku
Kesalahan kelima terjadi pada formulir input, terutama data yang membutuhkan format tertentu seperti nomor kartu kredit, nomor telepon, atau kode pos. Bila situs mengharuskan format sangat spesifik tanpa toleransi spasi atau karakter pemisah, pengguna rentan melakukan kesalahan input.
Secara psikologis, prinsip chunking mendukung bentuk input sebagai pecahan yang mudah diproses, contohnya pada nomor kartu kredit 16 digit yang dibagi menjadi empat kelompok berjumlah empat digit:

n = 16 , chunk size = 4 ,

total chunks =

n 4

= 4

Desain input seharusnya fleksibel menerima format apa pun dan secara otomatis memformat ulang agar mudah divalidasi dan mengurangi tingkat kesalahan.

7. Teks Kontras Rendah dan Ukuran Kecil
Kesalahan keempat utamanya berkaitan dengan aksesibilitas yang buruk. Teks dengan kontras rendah atau ukuran font yang kecil membuat pengguna, khususnya kelompok usia menengah ke atas, kesulitan membaca. Ini berlawanan dengan standar desain inklusif yang mengharuskan teks cukup besar dan kontras agar bisa dibaca oleh semua orang.
Riset menunjukkan ketajaman penglihatan (V) cenderung menurun seiring bertambahnya usia (a), sehingga desain harus meminimalkan kebutuhan penglihatan tinggi dengan:

V ∝

1 a

Sehingga font size dan kontras harus ditingkatkan untuk mengimbangi penurunan visual ini.

8. Tautan yang Menyesatkan
Kesalahan ketiga adalah membuat hyperlink yang tidak memberikan apa yang dijanjikan. Misalnya, tautan yang tampak mengarah ke artikel tetapi malah mengarah ke video atau halaman registrasi. Hal ini menimbulkan ketidakpercayaan dan kebingungan pengguna karena hyperlink merupakan elemen dasar dari web yang harus konsisten dan dapat diandalkan.

9. Waktu Respons Lambat
Kesalahan kedua adalah lambatnya waktu respon situs. Nielsen menekankan bahwa idealnya waktu yang dibutuhkan untuk menampilkan hasil setelah interaksi pengguna tidak lebih dari satu detik:

T_response ≤ 1 detik

Jika lebih lambat dari itu, pengguna mulai merasa terhambat, yang berujung pada penurunan kepuasan dan keengganan untuk menjelajah lebih jauh.

10. Popup Berlebihan
Kesalahan terbesar atau urutan pertama adalah penggunaan pop-up dan overlay yang berlebihan yang mengganggu pengguna. Dulu, pop-up berarti jendela baru; kini, overlay yang menutupi konten utama sama mengganggunya. Banyak situs saat ini memunculkan berbagai lapisan interupsi seperti penawaran, langganan newsletter, persetujuan cookie, chat, dan survei sekaligus.
Efek kumulatifnya seperti "barrage" yang menyebabkan pengguna menutup semuanya tanpa membaca, sehingga merusak pengalaman pengguna secara keseluruhan.

Kesimpulan

Dari sepuluh kesalahan di atas, terlihat pola umum yaitu arogansi desain di mana situs terlalu berfokus pada kepentingan sendiri tanpa memprioritaskan kebutuhan dan kenyamanan pengguna. Jakob Nielsen menutup makalahnya dengan perumpamaan puisi "The Charge of the Light Brigade":

"Theirs not to make reply, Theirs not to reason why, Theirs but to do and die."

Artinya, pengguna tidak bisa mengeluh atau berargumen, yang mereka lakukan hanyalah meninggalkan situs jika pengalaman buruk terus berlanjut. Oleh karena itu, menghindari kesalahan desain ini tidak hanya penting untuk meningkatkan kepuasan pengguna, tetapi juga krusial dalam menjaga keberlangsungan dan nilai bisnis dari sebuah situs web.

Rekomendasi Praktis
Untuk para perancang dan pengembang web, penekanan pada prinsip desain yang responsif terhadap medium, aksesibilitas, kecepatan, serta klaim yang jujur dan minimalkan gangguan pengguna adalah langkah fundamental. Berikut poin-poin penting yang direkomendasikan:

• Sesuaikan desain dengan perangkat pengguna, bukan hanya membesarkan desain mobile untuk layar desktop.
• Hindari penggunaan gambar hero tunggal yang menghalangi navigasi lebih lanjut.
• Minimalkan layout shift dengan memuat konten secara terstruktur dan mengalokasikan ruang placeholder.
• Gunakan ikon dengan label teks sehingga pengguna memahami fungsi tindakan.
• Pastikan teks bisa diseleksi dan disalin, hindari pembatasan copy-paste.
• Bentuk input harus fleksibel terhadap format pengguna.
• Terapkan teks dengan ukuran cukup besar dan kontras tinggi untuk aksesibilitas.
• Pastikan tautan memenuhi ekspektasi yang dijanjikan.
• Kecepatan loading harus optimal dengan target respon kurang dari satu detik.
• Kurangi jumlah pop-up dan overlay, fokuslah pada pengalaman pengguna yang nyaman dan tidak mengganggu.

Dengan penerapan tersebut, situs web dapat menghadirkan pengalaman yang lebih bermakna, memudahkan navigasi pengguna, serta meningkatkan efektivitas dan nilai bisnis secara keseluruhan.

References:

1. Jakob Nielsen (2021), Keynote Speech on Top 10 Web Design Mistakes 2021, Virtual Conference
2. Principles of Usability and User Experience Design, Nielsen Norman Group
3. Accessibility Guidelines, WCAG Standards
4. Cognitive Psychology on Chunking, Miller (1956)

Nama: Wahyu Al Adam - 8020240081