Apakah Semua Tren Layak? 5 Kesalahan UX Paling Umum yang Dilakukan Desainer Web

“Keanggunan tercapai ketika semua yang berlebihan telah dibuang dan manusia menemukan kesederhanaan dan konsentrasi: semakin sederhana dan semakin sadar posturnya, semakin indah jadinya.” –Paulo Coelho

Misi seorang desainer web adalah untuk menciptakan pengalaman pengguna yang menarik, membantu pengunjung situs menyelesaikan tugas, dan meningkatkan konversi. Dalam prosesnya, mereka seringkali hanya fokus pada estetika, mengambil jalan pintas, dan akhirnya mengandalkan berbagai pola dan tren desain yang umum. Bahayanya adalah mereka dapat teralihkan oleh tren populer, dan akibatnya, kesalahan umum UX dibuat karena tren tidak diterapkan secara tepat.

Ketika datang ke web, orang tidak ingin mempelajari sesuatu, mereka ingin melakukan sesuatu. Ada banyak contoh di web di mana desainer memilih untuk fokus hanya pada daya tarik visual dan dengan demikian, mengorbankan kegunaan. Mereka menganggap "momen wow" yang mendorong desain itu sendiri akan cukup kuat untuk melibatkan pengguna. Namun sayangnya, pengguna mengalami kesulitan memahami UI, benar-benar kesulitan menggunakan situs, dan rasio pentalan situs meroket.

Seperti yang dikatakan Kate Rutter, "Jelek tapi berguna mengalahkan cantik tapi tidak berguna." Kunci untuk menggunakan pola dan tren desain web secara efektif adalah menemukan keseimbangan antara apa yang terlihat menyenangkan secara estetis dan di mana mereka menambahkan nilai.

Mari kita lihat beberapa kesalahan umum UX.

Kesalahan Umum Desain Web UX No. 1: Header Besar dan Tetap

Semakin banyak tajuk lengket tinggi dapat dilihat di situs web. “Blok merek” dan menu navigasi yang memiliki posisi tetap dan memakan banyak ruang. Mereka tetap terpaku pada bagian atas jendela browser ("header lengket") dan sering memblokir konten saat bergulir di bawahnya.

Beberapa tajuk di situs web merek besar memiliki tinggi lebih dari 150 piksel. Di mana nilai mereka? Elemen tetap, seperti header lengket dapat memiliki manfaat nyata, tetapi desainer web harus berhati-hati menggunakannya—ada beberapa masalah UX penting yang perlu dipertimbangkan.

Header Nav Lengket Mungkin Terlalu Besar untuk Kenyamanan

Jika keputusan untuk menggunakan header sticky nav telah dibuat, yang terbaik adalah mengujinya dengan pengguna. Merupakan kesalahan umum UX untuk berlebihan dan mengisi header sticky nav dengan konten. Dengan header yang tetap, browsing harus tetap nyaman bagi pengunjung. Gagal menemukan keseimbangan yang tepat dapat mengakibatkan sedikit ruang untuk konten utama dan pengalaman situs yang menyesakkan dan sesak bagi pengunjung.

Terkadang ada solusi sederhana dengan CSS: dengan membuat header lengket sedikit transparan, orang masih dapat melihat konten melaluinya saat mereka menggulir, yang membuat area konten terasa lebih substansial.

Berikut adalah contoh header lengket yang tinggi: Halaman profil pemain ATP di Roger Federer.

Tajuk lengket situs ini memiliki tinggi lebih dari 180 piksel! Itu lebih dari 30% dari seluruh tinggi halaman pada beberapa laptop: pengalaman pengguna yang buruk yang dapat dihindari.

Tidak Mempertimbangkan Masalah UX Header Nav Lengket di Seluler

Beberapa orang mungkin menggunakan layar komputer beresolusi tinggi yang besar di mana header navigasi yang lengket dapat mempercepat interaksi, tetapi bagaimana dengan seluler? Tanpa ragu, sejumlah besar pengunjung situs akan mengakses situs dari perangkat seluler, jadi header tetap mungkin bukan ide terbaik. Untungnya, teknik desain responsif memungkinkan untuk merancang solusi yang berbeda untuk platform yang berbeda, dan tetap menggunakan header sticky nav—pun intended—untuk browser desktop.

Situs Coffee with a Cop juga memiliki header tetap, tetapi jauh lebih kecil—tingginya kurang dari 80 piksel.

Navigasi header, dalam hal ini, bisa dibilang solusi yang tepat untuk layar resolusi tinggi, karena memungkinkan navigasi yang lebih efisien. Pada layar resolusi yang lebih kecil, header juga diperbaiki tetapi memakan banyak ruang. Alternatif yang sangat baik untuk header nav lengket di ponsel adalah menu hamburger yang selalu ada. Meskipun pola ini bukan pemecah masalah universal, pola ini membebaskan banyak ruang.

Desain Web Kesalahan Umum UX No. 2: Tipis, Font Ringan

Hari-hari ini, font tipis dan ringan menyebar di banyak aplikasi dan situs web seluler. Dengan kemajuan teknologi layar dan rendering yang ditingkatkan, banyak desainer menggunakannya karena elegan, bersih, dan trendi. Namun, tipografi tipis dapat menyebabkan masalah kegunaan dan karenanya menghambat UX.

Tujuan semua teks di situs web adalah agar dapat terbaca, dan jenis yang tipis dapat sangat memengaruhi keterbacaan. Tidak semua pengunjung akan melihat situs pada tampilan yang menampilkan tipe tipis dengan baik. Beberapa jenis ringan sulit dibaca di iPhone atau iPad dengan layar Retina.

Di atas segalanya, teks harus dapat dibaca. Jika pengguna tidak dapat membaca kata-kata di aplikasi Anda, tidak peduli seberapa indah tipografinya.

Panduan Antarmuka Manusia Apple

Apple mengacu pada aplikasi seluler, tetapi prinsip yang sama berlaku untuk situs web. Keterbacaan adalah wajib, bukan opsional untuk kegunaan yang baik. Tidak ada gunanya menempatkan konten di situs web jika tidak dapat dibaca.

Berikut adalah beberapa kesalahan UX umum yang perlu dipertimbangkan sebelum menggunakan tipe tipis:

Menggunakan Font Tipis dan Ringan Karena Trendi

Font seharusnya tidak hanya terlihat bagus, tetapi juga harus dapat dibaca. Untuk mencapai kontras dan keterbacaan yang tepat, desainer harus mengupayakan kombinasi optimal dalam desain mereka: ukuran, berat, dan warna.

Sebaiknya uji situs di berbagai perangkat dan ukuran layar untuk memastikan semua teks situs dapat dibaca.

Yang membawa kita ke kesalahan UX umum berikutnya:

Tidak Menguji Keterbacaan Teks di Semua Perangkat Utama

Tipis, tipe ringan mungkin terlihat bagus di banyak monitor mahal desainer yang disetel dengan halus, tetapi rata-rata pengguna yang sering melihat desain kami pada tampilan yang lebih murah dan di bawah standar juga harus dipertimbangkan. Praktik terbaik adalah memeriksa tampilan font di semua perangkat utama: komputer desktop, laptop, tablet, dan ponsel cerdas.

Misalnya, saat menguji desain seluler, minta peserta menggunakan situs pada perangkat seluler di siang hari—pengguna dunia nyata tidak akan selalu memiliki penjelajahan dan kondisi pencahayaan yang sempurna. Jika menggunakan font tipis di situs web, ada cara sederhana untuk beradaptasi dengan pengguna seluler: tentukan font yang lebih tebal di seluler untuk keterbacaan yang lebih baik.

Desain Web Kesalahan Umum UX No. 3: Teks Kontras Rendah

Menggunakan elemen kontras warna rendah juga menjadi tren dalam desain antarmuka pengguna modern. Itu tumbuh dari tren desain minimalis karena dengan mengurangi kontras di beberapa area, desain akan terlihat “minimalis”. Desainer tidak dapat memotong kompleksitas informasi yang perlu disajikan, sehingga mereka bermain dengan kontras rendah dalam desain.

Kami telah membahas font tipis, tetapi ada perangkap yang lebih besar: kombinasi jenis huruf ringan dengan kontras rendah yang secara serius menghambat UX karena keterbacaan yang buruk. Desainer harus melakukan apa saja untuk menghindari jebakan kegunaan ini.

Kontras Teks Rendah dalam Salinan Tubuh

Cool Springs Financial menggunakan varian tipis Helvetica untuk teks isi di situs webnya. Meskipun terlihat elegan dan berkontribusi pada UI yang estetis, sulit untuk dibaca di beberapa platform. Meskipun kontras rendah tidak selalu buruk, ini dapat berdampak negatif pada kegunaan situs web dengan membuat teks sulit dibaca.

Tidak Menguji Kontras Teks

Ada alat yang bagus untuk pemeriksaan kontras di web yang disebut Colorable yang akan membantu desainer mengatur kontras teks yang benar sesuai dengan Pedoman Aksesibilitas Konten Web. Setelah desainer mengetahui bahwa mereka menggunakan kontras teks yang tepat, mereka dapat menyesuaikan warna lain di situs web mereka dan melakukan pengujian beberapa perangkat/pengguna secara cepat untuk memastikan teks dapat dibaca.

Desain Web Kesalahan Umum UX No. 4: Pembajakan Gulir

Tren berisiko tinggi lainnya yang berkembang di web adalah “scroll hijack.” Situs web yang menerapkan tren ini mengendalikan pengguliran halaman (biasanya dengan JavaScript). Ketika orang menemukannya, mereka tidak lagi memiliki kendali atas gulir halaman dan tidak dapat memprediksi perilakunya, yang dapat dengan mudah menyebabkan kebingungan dan frustrasi. Ini adalah eksperimen berisiko yang dapat merusak kegunaan situs web dan paling buruk, menyebabkan "kemarahan komputer."

Beberapa situs web dapat lolos dari pembajakan gulir, tetapi itu tidak berarti semua orang bisa. Misalnya, banyak perancang web mengikuti situs Apple dengan pembajakan gulir, efek paralaks, dan gambar resolusi tinggi dari berbagai produk. Apple memiliki target pasar, konsep unik, dan konten eksklusif untuk situs web mereka. Karena setiap situs memiliki masalah yang unik, ia juga harus memiliki solusi unik yang disesuaikan dengan masalah tersebut.

Tidak Menguji dengan Pengguna Dunia Nyata

Saat meminjam ide trendi atau pola UI, yang terbaik adalah menguji prototipe situs web pada pengguna dunia nyata untuk menghindari masalah UX. Pengujian kegunaan sederhana akan mengungkapkan apakah implementasi pembajakan gulir, misalnya, layak atau tidak. Tanpa pengujian, perancang tidak memiliki cara untuk mengetahui apakah pembajakan gulir akan berhasil, dan membuat asumsi sering kali memakan biaya.

Tumblr, situs blog pribadi yang populer, menggunakan pembajakan gulir di beranda mereka. Meskipun melakukannya bisa berisiko, aman untuk berasumsi bahwa mereka mengenal audiens target mereka dengan baik dan pengalaman pengguna yang keren dan keren yang ingin mereka hadirkan. Ketika pengunjung situs mulai menggulir, gulir dibajak, dan orang-orang dibawa ke bagian berikutnya.

Halaman gulir panjang dipecah menjadi beberapa bagian yang dapat dibedakan dengan banyak warna jenuh dan titik-titik indikator yang menonjol di sisi kiri jendela. Akibatnya, beranda Tumblr terasa seperti pengunjung korsel vertikal besar yang memiliki kendali atas, daripada situs web eksperimental yang tidak menyenangkan dengan pikirannya sendiri.

Kesalahan Umum Desain Web UX No. 5: Korsel

Korsel—slideshow untuk memutar melalui berbagai konten—sangat umum di web, terutama di halaman arahan dan beranda. Meskipun mereka dapat berguna, mereka memiliki banyak masalah kegunaan dan karena itu memenuhi syarat sebagai kesalahan UX umum lainnya. Menurut Nielsen Norman Group: " orang sering langsung menggulir melewati gambar besar ini dan melewatkan semua konten di dalamnya ." Ini dapat berdampak negatif pada UX karena pengunjung mungkin tidak melihat konten berharga di beberapa slide yang berputar.

Korsel Situs Web Mungkin Tidak Memberikan Nilai bagi Pengguna

Jika dilakukan dengan benar, carousel dapat melibatkan pengguna dengan gambar besar yang mencolok. Masalahnya, komidi putar sering kali tidak menambahkan nilai tambahan apa pun tetapi hanya ada untuk hiasan dan hanya disertakan karena semua orang menggunakannya. Cara untuk menguji apakah korsel situs masuk akal: tuliskan tiga manfaat yang diberikan korsel bagi pengunjung. Jika tiga manfaat yang berarti tidak dapat ditemukan, itu tidak menambah nilai apa pun.

Panah sebelumnya dan berikutnya Memiliki Kemampuan Menemukan Rendah

Informasi penting dalam korsel situs web dapat tetap tersembunyi jika panah berikutnya dan sebelumnya tidak dapat ditemukan. Kontrol juga harus kompatibel dengan ketuk untuk seluler.

Seringkali tidak ada panah untuk mengontrol korsel; hanya titik indikator slide yang disertakan untuk memajukan slide. Namun, mereka sering kali memiliki kontras yang rendah, memiliki kemampuan untuk ditemukan yang rendah, dan tidak memiliki area yang cukup besar untuk diklik atau diketuk. Target kecil yang dapat diklik dapat menyebabkan UX yang buruk, pengunjung situs web yang frustrasi, dan keluar cepat dari situs web.

Misalnya, situs web Yayasan Floresta Longo memiliki korsel gambar yang berputar di berandanya. Ini diatur untuk memutar otomatis dan berputar melalui lima foto. Namun, panah sebelumnya dan berikutnya berukuran kecil dan transparan, yang membuatnya sulit dikenali dan sulit untuk diklik. Tidak ada indikator untuk pengunjung slide aktif, dan tidak ada label untuk menandakan apa yang diwakili oleh gambar. Gambar bukan tautan dan bertindak sebagai hiasan murni. Meskipun jenis korsel ini mungkin memiliki nilai untuk menarik pengunjung, secara keseluruhan korsel ini meninggalkan banyak hal yang diinginkan.

Kesimpulan

Tren desain web, jika tidak dipertimbangkan dengan hati-hati dan diterapkan dengan hati-hati, dapat menyebabkan beberapa kesalahan umum UX. Desainer UX harus menggunakan penilaian terbaik mereka dan tidak takut untuk berinovasi, tetapi untuk memastikan kegunaan situs web yang hebat, itu akan membantu mereka dengan baik untuk menguji desain mereka secara menyeluruh dengan pengguna dunia nyata.

Dalam banyaknya tren desain web yang gila, hal-hal dalam mode datang dan pergi. Di tengah kekacauan ini, penggunaan estetika, efisiensi, dan kegunaan yang seimbang memainkan peran penting dalam membedakan tren UX yang telah terbukti paling kuat dan paling banyak diterima pengguna.

Desainer web dapat membuat skema warna paling keren, animasi gulir paling keren, atau efek paralaks paling fantastis, tetapi jika interaksi manusia terganggu sebagai akibatnya, UX akan buruk, dan orang-orang akan segera melanjutkan. Situs lain hanya dengan sekali klik.

Bacaan lebih lanjut di Blog Desain Toptal:

• Desain Responsif – Praktik Terbaik dan Pertimbangan
• Mendekati Proses Desain Situs Web dari Browser
• Coding untuk Desainer – Berapa Banyak yang Harus Kita Ketahui?
• Praktik Terbaik Desain UI dan Kesalahan Umum