“Keanggunan tercapai ketika semua yang tidak berguna telah dibuang dan manusia menemukan kesederhanaan dan konsentrasi: semakin sederhana dan lebih bijaksana sikap tubuh, semakin indah pula itu.” –Paulo Coelho

Misi perancang web adalah 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 umum. Bahaya dalam hal ini adalah bahwa mereka dapat teralihkan oleh tren populer, dan akibatnya, kesalahan UX umum dibuat karena tren tersebut dikerahkan secara tidak tepat.

Ketika datang ke web, orang tidak ingin belajar sesuatu, mereka ingin melakukan sesuatu. Ada banyak contoh di web di mana desainer memilih untuk hanya fokus pada daya tarik visual dan dengan demikian, mengorbankan kegunaan. Mereka mengira “wow moment” yang mendorong desain akan cukup kuat untuk melibatkan pengguna. Tetapi sayangnya, para pengguna mengalami kesulitan memahami UI, memiliki kesulitan asli menggunakan situs, dan tingkat bouncing situs telah meroket.

Seperti yang dikatakan Kate Rutter , “Truf jelek tapi berguna cantik tapi tidak berguna.” Kunci untuk menggunakan pola dan tren desain web secara efektif adalah menemukan keseimbangan antara apa yang tampak menyenangkan secara estetika dan di mana nilai tambahnya.

Mari kita lihat beberapa kesalahan UX yang umum.

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

Header lengket yang semakin tinggi dapat dilihat di situs web. “Blok pencitraan 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 tingginya lebih dari 150 piksel. Di mana nilainya? Elemen tetap, seperti header lengket dapat memiliki manfaat nyata , tetapi perancang web harus berhati-hati menggunakannya — ada beberapa masalah UX penting yang perlu dipertimbangkan.

Header Nav Sticky Mungkin Terlalu Besar untuk Kenyamanan

Jika keputusan untuk menggunakan tajuk lengket sudah dibuat, yang terbaik adalah mengujinya dengan pengguna. Ini adalah kesalahan umum UX untuk pergi ke laut dan mengisi sticky nav header dengan konten. Dengan tajuk yang tetap, menjelajah harus tetap nyaman bagi pengunjung. Gagal menemukan keseimbangan yang tepat dapat mengakibatkan menyisakan sedikit ruang untuk konten utama dan pengalaman situs yang sesak dan sesak bagi pengunjung.

Terkadang ada solusi sederhana dengan CSS: dengan membuat tajuk lengket sedikit transparan, orang masih dapat melihat konten melalui itu ketika mereka menggulir, yang membuat area konten terasa lebih substansial.

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

Header lengket situs ini memiliki ketinggian lebih dari 180px! Itu lebih dari 30% dari seluruh tinggi halaman pada beberapa laptop: pengalaman pengguna yang buruk yang bisa dihindari.

Tidak Mempertimbangkan Masalah Header Nav Header UX di Ponsel

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

The Coffee dengan Cop situs juga memiliki header tetap, tetapi jauh lebih kecil-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, tajuk juga diperbaiki tetapi membutuhkan banyak ruang. Alternatif yang sangat baik untuk header nav lengket di ponsel adalah menu hamburger yang selalu ada. Meskipun pola ini bukan merupakan pemecah masalah yang universal, ia membebaskan sejumlah besar ruang.

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

Dewasa ini, font yang tipis dan ringan meresap di banyak aplikasi seluler dan situs web. Dengan kemajuan teknologi layar dan rendering yang ditingkatkan, banyak desainer menggunakannya karena mereka elegan, bersih, dan trendi. Namun, tipografi yang tipis dapat menyebabkan masalah kegunaan dan karena itu menghambat UX.

Tujuan dari semua teks pada situs web adalah untuk dapat dibaca, dan tipe tipis dapat secara serius mempengaruhi keterbacaan. Tidak semua pengunjung akan melihat situs pada tampilan yang menghasilkan tipe tipis dengan baik. Beberapa jenis cahaya sulit dibaca di iPhone atau iPad dengan layar Retina.

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

Panduan Antarmuka Manusia Apple

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

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

Menggunakan Huruf Tipis dan Ringan Karena Ini Trendy

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

Cara terbaik untuk menguji situs pada berbagai perangkat dan ukuran layar untuk memastikan semua teks situs terbaca.

Yang membawa kita ke kesalahan UX umum berikutnya:

Tidak Menguji Keterbacaan Teks pada Semua Perangkat Utama

Tipe tipis dan ringan mungkin terlihat bagus pada monitor mahal, yang disetel dengan halus oleh para desainer, 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 bagaimana font terlihat pada semua perangkat utama: komputer desktop, laptop, tablet, dan smartphone.

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

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

Menggunakan elemen kontras warna rendah juga menjadi tren dalam desain antarmuka pengguna modern. Ini tumbuh dari tren desain minimalis karena dengan mengurangi kontras di beberapa daerah, desain akan tampil “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 jebakan yang lebih besar: kombinasi jenis huruf ringan dengan kontras rendah yang sangat menghambat UX karena mudah dibaca. Desainer harus melakukan apa saja untuk menghindari jebakan kegunaan ini.

Kontras Teks Rendah di Salin Tubuh

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

Tidak Menguji Kontras Teks

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

Kesalahan Umum Desain Web UX No. 4: Gulir Pembajakan

Tren risiko tinggi lainnya yang muncul di web adalah “scroll hijack.” Situs web yang menerapkan tren ini mengendalikan pengguliran halaman (biasanya dengan JavaScript). Ketika orang-orang menemukannya, mereka tidak lagi memiliki kendali atas halaman gulir 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, memicu ” kemarahan komputer .”

Beberapa situs web dapat lolos dengan pembajakan gulir, tetapi itu tidak berarti semua orang bisa melakukannya. Misalnya, banyak perancang web mengikuti situs Apple dengan pembajakan gulir, efek paralaks, dan gambar beresolusi tinggi dari berbagai produk. Apple memiliki target pasar, konsep unik, dan konten eksklusif untuk situs web mereka. Karena setiap situs memiliki masalah unik, itu 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 untuk menguji prototipe situs web pada pengguna dunia nyata untuk menghindari masalah UX. Pengujian kegunaan sederhana akan mengungkapkan apakah implementasi pembajak gulir, misalnya, layak atau tidak. Tanpa pengujian, desainer tidak memiliki cara untuk mengetahui apakah pembajakan gulir akan berhasil, dan membuat asumsi seringkali mahal.

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

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

Kesalahan Umum Desain Web UX No. 5: Karosel

Karosel — rangkai salindia untuk memutar berbagai konten — sangat umum di web, terutama di laman landas dan beranda. Meskipun mereka bisa berguna, mereka memiliki banyak masalah kegunaan dan karenanya memenuhi syarat sebagai kesalahan UX umum lainnya. Menurut Nielsen Norman Group : ” orang-orang sering segera menggulir melewati gambar-gambar besar ini dan kehilangan semua konten di dalamnya .” Ini dapat berdampak negatif bagi UX karena pengunjung mungkin tidak melihat konten yang berharga di beberapa slide yang berputar.

Karosel Situs Web Mungkin Tidak Memberikan Nilai bagi Pengguna

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

The sebelumnya dan berikutnya Arrows Memiliki Rendah Ditemukan

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

Seringkali tidak ada panah untuk mengendalikan korsel; hanya titik indikator slide yang disertakan untuk memajukan slide. Namun, mereka sering kali memiliki kontras rendah, memiliki tingkat penemuan yang rendah, dan tidak memiliki area yang cukup dapat diklik atau disadap . 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 beranda. Ini diatur ke putar otomatis dan berputar melalui lima foto. Namun, panah sebelumnya dan berikutnya berukuran kecil dan transparan, yang membuatnya sulit dikenali dan menantang untuk diklik. Tidak ada indikator untuk pengunjung slide aktif, dan tidak ada label untuk menandakan apa yang diwakili gambar. Gambar-gambar itu bukan tautan dan bertindak sebagai hiasan murni. Meskipun jenis korsel ini mungkin memiliki nilai untuk menarik perhatian pengunjung, secara keseluruhan hal ini meninggalkan banyak hal yang diinginkan.

Kesimpulan

Tren desain web, jika tidak dipertimbangkan secara hati-hati dan diimplementasikan dengan hati-hati, dapat menyebabkan beberapa kesalahan UX umum. 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 banyak tren tren desain web, 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 menjadi yang terkuat dan mengumpulkan paling banyak penerimaan pengguna.

Desainer web dapat menghasilkan skema warna paling keren, animasi gulir paling keren, atau efek paralaks paling fantastis, tetapi jika interaksi manusia menderita, UX akan menjadi buruk, dan orang-orang akan dengan cepat pindah. Situs lain hanya dengan sekali klik.

sumber: toptal.com