Jakob Nielsen baru-baru ini
membagikan daftar terbarunya tentang 10 kesalahan desain terbesar. Berikut
adalah pidato utamanya dari konferensi virtual kami tahun 2021.
1.Desain Mobile untuk Layar
Besar
Ini adalah contoh spesifik dari
kesalahan umum yaitu tidak merancang sesuai media yang digunakan pengguna.
Sepuluh tahun lalu, kesalahan sebaliknya justru sering terjadi: desain desktop
yang dipaksakan ke perangkat mobile. Situs web yang tampak baik di monitor
besar, tetapi ketika diperkecil di ponsel menjadi sangat sulit digunakan.
Sekarang, kesalahan ini sudah jarang terjadi. Tapi sebaliknya, banyak situs
sekarang membuat desain yang bagus di ponsel tapi tidak bekerja baik di layar
besar. Contohnya adalah menu hamburger.
Di layar kecil, masuk akal karena keterbatasan ruang. Tapi di layar besar,
kenapa harus menyembunyikan menu itu? Ikon kecil di pojok layar besar tidak
menonjol, dan pengguna lebih jarang menggunakan menu jika disembunyikan seperti
itu.
2. Gambar Hero Besar di Atas
Lipatan (Above the Fold)
Dulu ada kesalahan mirip yang disebut “splash screen”, seperti ucapan “Selamat
datang di situs saya” dengan animasi atau gambar yang mengganggu. Untungnya itu
sudah mulai hilang, tapi sekarang muncul kembali dalam bentuk gambar besar di
atas lipatan layar.
Masalahnya adalah, pengguna tidak tahu mereka bisa scroll karena seluruh layar
terlihat penuh. Itu menciptakan ilusi bahwa tidak ada apa-apa lagi di bawah.
Lebih baik langsung tampilkan beberapa pilihan konten atau navigasi agar
pengguna tahu apa saja yang tersedia di situs.
3. Perpindahan Layout Saat
Memuat Halaman
Ini lebih ke masalah teknis. Situs kini sering memuat berbagai komponen dari
layanan cloud yang berbeda.
Setiap kali elemen baru dimuat, tata letak halaman berubah dan elemen lain
berpindah tempat. Ini mengganggu secara estetika dan juga merugikan pengguna.
Kadang pengguna sedang mengklik suatu bagian, tapi saat halaman bergeser,
mereka tidak sengaja mengklik elemen lain karena posisi berubah. Ini
menyebabkan frustrasi besar.
4. Ikon Tanpa Label
Desainer sering kali menggunakan
ikon-ikon umum (seperti ikon hamburger ≡, ikon hati ♥,
ikon keranjang 🛒,
dll.) dengan asumsi bahwa semua orang akan langsung tahu artinya. Namun,
kenyataannya, tidak semua pengguna mengerti maksud ikon-ikon tersebut — apalagi
jika digunakan dalam konteks yang tidak umum atau jika audiensnya beragam
secara usia dan latar belakang digital.
Contohnya:
- Ikon titik tiga (⋮ atau …) bisa berarti
"menu", "opsi lainnya", atau bahkan
"bagikan", tergantung konteks.
- Ikon panah bisa membingungkan: apakah itu ke
halaman berikutnya, mengunduh, atau kembali?
Solusi terbaik: Tambahkan
label teks di bawah atau di samping ikon, terutama pada navigasi utama atau
fitur penting.
5. Layout Bergeser Saat Loading
(Layout Shift)
Ini adalah ketika bagian halaman
"meloncat-loncat" saat sedang dimuat — misalnya, kamu mulai membaca
sebuah paragraf, lalu tiba-tiba teks itu turun karena iklan atau gambar baru
saja dimuat. Sangat menjengkelkan, terutama di perangkat mobile.
Ini disebut sebagai Cumulative
Layout Shift (CLS) dalam istilah teknis, dan merupakan salah satu
metrik penting dalam Core Web Vitals dari Google.
Penyebab umum:
- Gambar tanpa ukuran yang ditentukan.
- Font yang dimuat lambat.
- Iklan atau elemen dinamis tanpa ruang cadangan.
Solusinya: Tentukan
tinggi dan lebar untuk semua elemen visual, dan hindari menyuntikkan elemen
besar ke halaman setelah dimuat.
6. Tidak Bisa Menyalin dan
Paste Konten
Beberapa situs memblokir aksi klik
kanan atau mematikan fitur copy-paste, seringkali untuk
"melindungi konten" atau mencegah plagiarisme. Namun, ini malah
menghambat pengguna yang ingin menyalin alamat, kutipan, atau referensi untuk
tujuan sah.
Contohnya:
- Formulir yang memblokir tempel (paste) pada kolom
email atau password.
- Artikel yang tidak bisa disalin bahkan hanya untuk
catatan pribadi.
Solusinya: Izinkan
copy-paste, dan jika khawatir soal hak cipta, gunakan watermark atau peringatan
kecil, bukan dengan memblokir seluruh fungsionalitas.
7. Input yang Tidak Fleksibel
Formulir online seringkali terlalu
kaku. Misalnya:
- Nomor telepon harus dalam format tertentu.
- Kartu kredit tidak boleh ada spasi.
- Nama hanya boleh huruf, padahal ada orang bernama
O'Connor atau María-José.
Desain form seperti ini
memperlambat pengguna dan terasa tidak ramah.
Solusinya: Desain form
yang fleksibel, toleran, dan "pemaaf" terhadap variasi input. Gunakan
validasi yang cerdas dan beri pesan kesalahan yang jelas.
8. Teks Kecil atau Kontras
Rendah
Banyak situs menggunakan teks
abu-abu muda di atas latar putih, atau font kecil karena "estetika
minimalis". Ini membuat konten sulit dibaca, terutama oleh pengguna dengan
penglihatan rendah atau di layar kecil.
Konsekuensi:
- Mata cepat lelah.
- Informasi sulit dipahami.
- Pengguna cenderung pergi lebih cepat.
Solusinya: Gunakan
ukuran font minimal 16px untuk teks utama, dan pastikan kontras warna sesuai
standar aksesibilitas (WCAG minimum rasio 4.5:1 untuk teks normal).
9. Tautan Menyesatkan dan Tidak
Sesuai Ekspektasi
Ini terjadi saat tautan
mengarahkan ke sesuatu yang tidak sesuai dengan yang dijanjikan. Misalnya:
- Klik "Unduh sekarang" tapi malah
diarahkan ke halaman iklan.
- Tautan “Tentang Kami” ternyata isinya promosi
produk.
Hal ini menurunkan kepercayaan
pengguna dan membuat pengalaman menjelajah jadi buruk.
Solusi: Pastikan teks
link merepresentasikan isi tujuannya dengan akurat, dan hindari clickbait.
10. Popups dan Overlays yang
Mengganggu
Popup sering kali muncul terlalu
cepat, terlalu besar, atau terlalu sulit ditutup. Ini mengganggu pengalaman
pengguna, apalagi di mobile. Bahkan jika bertujuan baik (misalnya promosi
diskon), jika cara penyampaiannya mengganggu, pengguna bisa langsung keluar
dari situs.
Solusi: Gunakan popup
yang tidak mengganggu alur pengguna. Tampilkan hanya jika ada niat jelas dari
pengguna (misalnya saat hendak keluar halaman, atau setelah scroll 70%
artikel).
0 comments:
Posting Komentar