KafeGue.com

Meningkatkan Keterbacaan List Link pada Sidebar

pada 26 August 2010 → 2598 views

Idealnya, list link (daftar link) yang terdapat pada sidebar haruslah mudah dibaca oleh pengunjung blog/situs. Bisa jadi pada list tersebut terdapat link-link penting yang mengandung informasi berguna bagi mereka. Oleh sebab itu, wajib bagi pemilik blog/situs memperhatikan keterbacaan list link tersebut. Jika diabaikan, kemungkinan pengunjung tidak akan mengkliknya (karena tingkat keterbacaan yang sangat buruk).

Contoh sidebar yang sangat buruk keterbacaannya bisa Anda lihat pada screenshot berikut ini.

Mengapa sidebar di atas kurang baik? Penyebabnya yaitu :

• jarak spasi antar list terlalu rapat,
• menggunakan perataan justify,
• tidak ada penanda di setiap awal list, dan
• tidak ada pembatas antar setiap listnya.

Cara memperbaikinya bisa Anda simak pada penjelasan di bawah ini.

Ada 10 cara untuk meningkatkan keterbacaan list link pada sidebar, yaitu :

1. Memilih kombinasi yang pas antara warna latar dan warna link.

   Dalam hal ini, sesuaikanlah dengan desain situs/blog Anda. Warna gelap di atas terang sepertinya lebih universal. Tidak mesti hitam ( #000 ) di atas latar putih ( #fff ). Yang penting kontrasnya pas. Warna terang di atas gelap pun tidak masalah, sepanjang kombinasinya juga serasi.

2. Memilih kombinasi yang pas antara warna latar dan warna link saat dihover (disorot oleh pointer).

   Untuk lebih meyakinkan pengunjung bahwa itu adalah sebuah link/tautan (yang bisa diklik), perubahan warna link dan latarnya saat dihover akan sangat membantu. Minimal berubah warna ketika linknya disorot oleh kursor/pointer. Sedangkan warna latarnya tidak harus berubah. Kecuali list linknya disetel berupa blok (dengan kode CSS display:block ).

   Catatan : Jangan lupakan juga untuk memberi efek khusus pada saat focus (saat tabbing dengan ‘keyboard’), active (saat dieksekusi/diklik), dan visited (telah dikunjungi). Silakan baca Pakai Hover Jangan Lupa Focus (di situs Dani Iswara.com)

3. Menggunakan list-style untuk menandai setiap list.

   Gunanya yaitu untuk memperjelas setiap list atau setiap permulaan list. Ada kalanya list link yang terlalu rapat antar satu dengan lainnya jadi sulit dipindai atau sulit dikenali awal setiap listnya. Di situlah perlunya diberi penanda berupa (misalnya) bullet. Bisa disetel lewat penambahan property CSS berupa list-style-type:square/circle/disc pada ul li (pada kode CSS untuk sidebar atau list menu).

   Bisa pula dengan menggunakan property list-style-image jika ingin memakai image/gambar sebagai penanda list (yang dipanggil dengan url sumbernya).

   Contoh sidebar :

4. Menggunakan pembatas berupa garis atau dot antar setiap list.

   Ada kalanya garis pembatas ( border ) ini diperlukan untuk memisahkan antar list link, terutama jika linknya tidak disetel bergaris bawah dan tidak ditandai dengan bullet (list-style-type). Pada kondisi tersebut, fungsi garis pembatas yaitu untuk memperjelas/mempertegas antar list. Terlebih lagi jika ‘line-height’ teksnya sangat rapat atau tidak menggunakan penanda pada awal setiap listnya.

   Contoh sidebar yang menggunakan pembatas berupa garis antar setiap listnya.

   

5. Merenggangkan line-height atau jarak spasi antar baris link.

   Cukup sering saya temukan tampilan sidebar situs/blog yang agak sulit dibaca oleh karena terlalu rapatnya jarak spasi antar baris linknya. Terutama ketika ‘anchor text’ pada linknya agak panjang, sehingga satu list link bisa terdiri dari 2 atau 3 baris. Solusi terbaiknya yaitu dengan memperbesar ukuran line-height.

6. Mengatur perataan teks link dengan left-alignment.

   Mengapa harus rata kiri? Biar terlihat lebih rapi saja, terutama jika teks linknya terdiri dari beberapa kata atau agak panjang. Jika dalam list mayoritas terdiri dari satu atau dua kata saja, penggunaan selain rata kiri (misalnya justify-align) tidak masalah.

7. Menyesuaikan ukuran font yang pas dengan jenis font yang digunakan pada list.

   Untuk jenis font serif dan sans serif tertentu, ada yang agak rendah keterbacaannya jika berukuran 11px atau 12px. Oleh sebab itulah, perlu diperbesar ukurannya. Misalnya menjadi 13 – 18px. Tentunya dibarengi dengan mengatur line-height yang pas dan disesuaikan pula dengan desain situs/blog secara keseluruhan.

8. Menyetel agar link pada list bergaris bawah (underline).

   Sudah jamak diketahui bahwa teks yang bergaris bawah itu menandakan sebuah tautan yang bisa diklik. Namun untuk link/tautan pada sidebar, menurut saya tidak wajib disetel bergaris bawah. Apalagi jika sudah diberi pembatas/penanda antar setiap listnya berupa bullet atau garis. Kadang pada kondisi sidebar tertentu, link yang bergaris bawah terkesan mengurangi nilai estetika.

9. Memberikan efek bergaris-bawah saat link dihover.

   Terutama jika linknya tidak disetel bergaris-bawah sebelum dihover. Gunanya untuk mempertegas bahwa itu adalah sebuah tautan yang bisa diklik.

10. Mengatur padding yang pas antara list link dengan pembatasnya.

    Poin ini berlaku jika antar setiap list link diberi garis pembatas, entah berupa garis solid , dotted , atau dashed. Padding artinya jarak antara list link dengan garis pembatasnya. Jika terlalu dekat/rapat, tentunya kurang baik dari sisi estetika tampilan. Selain juga bisa mengurangi keterbacaan. Jadi, berilah ukuran padding yang pas. Tidak terlalu rapat dan juga tidak terlalu renggang!

Sepuluh cara di atas tidak harus diterapkan semuanya sekaligus. Cukup kombinasikan beberapa cara. Tidak wajib semuanya! Terlalu banyak efek justru kurang baik.

Jika link sudah disetel bergaris bawah, mungkin tidak diperlukan lagi garis pemisah/pembatas antar list link. Cukup gunakan property list-style-type sebagai penanda setiap listnya. Kecuali linknya sengaja tidak disetel bergaris bawah.

Untuk memodifikasi tampilan list link pada sidebar situs/blog Anda, tentunya Anda harus sedikit mengerti pemrograman website dengan menggunakan CSS. Sebab mayoritas cara-cara di atas memang menggunakan kode CSS agar efek yang diharapkan bisa tampil.

Di sini saya sengaja tidak memberikan tutorial modifikasi kode CSS-nya. Akan menjadi sangat panjang kalau juga saya jelaskan pada tulisan ini. Jadi, silakan cari dan pelajari tutorial-tutorial seputar CSS yang banyak bertebaran di internet.

Sebelum tanya, silakan googling dulu! (kecuali jika ingin bertanya pendapat saya tentang keterbacaan list link sidebar situs/blog Anda). Referensi terkait lainnya silakan baca merapikan tampilan sidebar (kafegue.com).

Maaf, karena alasan tertentu, kotak komentar ditutup!