Fig 1. Link di slashdot.org
| Arsip mwmag | [Files] [Up] | © 2002 PT Masterweb Media |
Figures
Klik. Klik. Mungkin suara itu yang paling banyak didengar di Web. Dan apa lagi yang diklik kalau bukan hiperlink, atau link singkatnya. Sebagai salah satu elemen yang terpenting dan paling menentukan dalam desain web, sudah sewajarnya kita perlu memberikan perhatian lebih kepada link. Artikel ini mencoba membahas desain link teks terutama dari sisi usability dan efektivitas.
Jakob Nielsen mengkategorikan link ke dalam 3 jenis utama: 1) link navigasi struktural, yaitu yang membantu user bergerak dari satu halaman ke halaman lain dalam sebuah situs; contohnya adalah link ke home atau link halaman-halaman satu level di bawah halaman yang sedang dilihat; 2) link asosiatif konten, yaitu link yang menunjukkan informasi kepada user di mana mencari keterangan lebih lanjut terhadap sebuah kata atau frase; contohnya adalah link terhadap sebuah judul buku atau nama pengarang, di mana jika kita klik maka akan muncul halaman lain di situs tersebut yang menjelaskan lebih lanjut mengenai buku yang dimaksud; 3) link Lihat Juga, yaitu untuk membantu user mencari dokumen lain seandainya dokumen ybs tidak cocok baginya; misalnya daftar situs-situs referensi/pilihan di bagian akhir dokumen.
Teks yang langsung berhubungan. Saya cenderung lebih menyukai cara orang “dulu”—alias zaman pra-web—dalam melink, misalnya di online help Turbo Pascal atau Windows .HLP, atau di dokumentasi Unix texinfo. Banyak orang sekarang yang melakukan linking dengan salah atau tidak efektif. Misalnya, yang paling sering, adalah dengan melink teks Klik Di Sini (Click Here). Selain kurang universal—pengguna browser berbasis teks atau nonvisual tidak mengenal konsep ‘klik’ karena ‘klik’ di sini berkaitan dengan pointer GUI dan mouse—hiperlink ini juga tidak mengandung informasi sama sekali. Seharusnya kata atau frase yang berhubunganlah yang harus dijadikan link. Ketimbang: “Ingin mengetahui lebih lanjut tentang peradaban Baduy? Klik di sini.” akan lebih efektif jika kita menggunakan “Peradaban Baduy cukup unik dan maju.”
Jakob menyarankan agar teks link tidak terlalu panjang (lebih dari empat kata) tapi sebaiknya mengandung kata sifat atau kata keterangan singkat yang menjelaskan link apa itu, sebab tidak semua user punya waktu untuk mengetahui apa isi link. Jika teks link tidak cukup jelas maka user jadi harus membuka link itu dulu untuk mengetahui kira-kira apa isi dokumen. Menurut saya, sebisa mungkin memang jaga agar link tetap pendek untuk tetap menjaga halaman bersih. Jika nama file atau direktori di URL yang dituju sudah cukup jelas, misalnya www.library.com/books/peradaban_baduy/chapter/bab01-latar_belakang.html, maka Anda bisa memperpendek lagi teks link menjadi satu dua kata saja. Pengguna sudah bisa mengira-ngira apa isi link ini dengan melihat sekilas URL dari status bar. (Tentu saja, sebaiknya status bar tidak perlu ditutup-tutupi dengan teks onMouseOver).
Gambar 1 memperlihatkan penggunaan hiperlink di situs slashdot.org yang memanfaatkan teks yang pendek-pendek namun tepat pada sasaran. Keuntungan hiperlink pendek lainnya, Anda dapat menjejalkan lebih banyak hiperlink ke dalam satu paragraf teks. Ini ada efek samping positifnya, sebab search engine seperti Google akan dapat menilai halaman Anda lebih tinggi.
Namun berhati-hati pula agar tidak menggunakan teks yang terlalu pendek—atau image yang terlalu kecil—sebagai hiperlink, sebab sulit dihover dan diklik terutama jika resolusi layar tinggi dan ukuran teks kecil.
Hingga saat ini, penampilan standar sebuah link teks adalah 1) bergaris bawah; 2) berwarna biru jika belum pernah dikunjungi (state new); 3) berwarna merah saat ditekan (state aktif); dan 4) berwarna ungu jika sudah pernah dikunjungi (state visited).
Sejak versi-versi awal Netscape, kita sudah dapat mengubah warna link baik untuk state new, aktif, dan visited—yaitu melalui atribut LINK, ALINK, dan VLINK pada elemen <BODY> HTML. Melalui CSS, kita juga dapat mengubah penampilan link seperti apakah link ingin dicetak tebal, atau apakah link ingin diberi garis bawah atau tidak (didukung sejak IE3 dan NS4), ataukah ingin diberi warna latar belakang atau tidak, atau apakah ingin overline sebagai pengganti underline? Microsoft juga memperkenalkan pseudo-class :hover pada CSS sehingga memungkinkan kita mengubah penampilan link pada kondisi di mana kursor mouse berada di atas teks link namun tombol mouse belum diklik. Bahkan melalui efek-efek lain yang spesifik di IE kita bisa memberikan efek glow atau outline pada tulisan link. Dan dengan Javascript kita bisa memberi efek seperti mengubah kursor mouse saat link dihover, atau membuat garis bawah yang kelap-kelip.
Para pakar usability umumnya bersifat amat konvensional dalam menyarankan penampilan link. “Biarkan sesuai warna aslinya, jangan dikutak-katik,” begitu kata Jakob. Bahkan di kolom Alertbox-nya bulai Mei 1996 Jakob mencantumkan “non-standard link colors” sebagai salah satu dari Top 10 Mistakes in Web Design. Keras sekali.
Tentu saja, aturan desain bukan patokan mati. Aturan berubah sesuai zaman, dan apa yang dilakukan oleh situs-situs popular biasanya menjadi tren dan diikuti orang—tak peduli itu “benar” atau “salah”. Jakob sendiri mengakui; apa yang salah bisa jadi benar, apa yang tidak boleh bisa jadi boleh, kalau mayoritas situs-situs terkenal sudah mempraktikkannya.
Mengubah warna link menjadi oranye atau hijau kadang-kadang dilakukan desainer dengan tujuan menyerasikan palet warna. “Selama warna link tetap kontras dan jelas terbedakan dari teks/background, boleh-boleh saja,” demikian ditulis di salah satu halaman panduan desain Universitas Monash. Jika Anda memilih warna latar belakang biru misalnya, maka hiperlink yang tetap biru tidaklah cocok. Dalam kasus ini Anda justru lebih baik mengubah warna hiperlink menjadi kuning atau bahkan putih.
Sejak CSS diperkenalkan, mulai banyak situs yang menggunakannya untuk menghilangkan garis bawah pada link. Sekilas halaman web akan menjadi tampak lebih bersih. Kadang-kadang ini diberlakukan untuk state tertentu saja, untuk mempermanis dan memperjelas efek hiperlink. Misalnya, link normal tidak bergaris bawah, tapi pada state hovered menjadi bergaris bawah. Atau dibalik, seperti yang dipraktikkan di cnn.com (link normal bergaris bawah, tapi saat dihover jadi tak bergaris bawah; lihat Gambar 2). Selama link tetap mudah terbedakan, ini bukan masalah usability yang berarti. Weinscheck Consulting misalnya, menyarankan agar link tak bergaris bawah dibuat cetak tebal untuk membantu membedakannya dari teks biasa. Link situs wanita.com di Gambar 3 adalah contoh link yang tidak terbedakan dari teks biasa. Warna sama-sama hitam, kadang tebal dan tidak. Sekilas melihat halaman ini, siapa yang dapat menyangka kalau teks “Philipina, Dari Pantai ke Pantai”, “Selengkapnya”, dan “Iga Campur Sayuran” sebetulnya adalah hiperlink? Tujuan desainernya nampaknya ingin membuat halaman situs sebersih mungkin, dengan konsekuensi mengorbankan penampilan link. User harus meraba-raba dengan mousenya untuk mencari mana yang link dan bukan. Apakah “Pisces” hiperlink juga? Penampilan ini juga mengakibatkan kita tidak mungkin menyisipkan link potongan kata-kata tertentu di dalam suatu paragraf, sebab link-link ini tidak akan bisa dicari secara visual.
Fig 2. Penampilan link cnn.com
Fig 3. Penampilan link wanita.com
Bagaimana pun juga, hingga kini pun banyak yang masih menganjurkan agar bersikap konvensional saja. Tulis seorang penulis Andrew Sterling di WDVL, “Pertimbangkan faktor ekspektasi user terhadap hiperlink. Kebanyakan mengharapkan warnanya biru. Jadi untuk meminimalisasi perbedaan ekspektasi, alangkah baiknya membiarkan link tetap biru.” Banyak situs popular pun tetap membiarkan warna link standar. Contoh paling terkenal tentu saja Yahoo! dan Google. Keduanya cenderung amat konvensional—kuno—dalam desain tapi termasuk yang dinilai memiliki usability tinggi.
Daripada berisiko merendahkan usability, ada baiknya tidak bermain-main dengan efek yang aneh-aneh terhadap link. Berikut ini beberapa pemilihan atau kombinasi buruk yang diurutkan—menurut bobot penilaian saya—dari yang teringan sampai ke yang paling parah mengganggu usability.
1. membuat link state new berwarna ungu; ini membingungkan user karena ungu secara standar dipakai untuk link state visited. Betul, pakailah warna-warna yang lebih redup untuk state visited, dan warna yang lebih tajam/terang untuk state aktif dan new. Tapi kalau bisa hindari penukaran arti warna-warna standar (mis: ungu untuk aktif atau new; biru/merah untuk visited, dsb);
2. membuat ukuran hiperlink terlalu besar atau kecil; meskipun membuat hiperlink menonjol itu bagus, tapi jika link banyak disisipkan di dalam paragraf teks yang panjang maka hiperlink yang terlalu besar atau kecil akan mengganggu penampilan tulisan;
2. membuat salah satu state link (misalnya visited, hovered, atau active) memiliki penampilan link yang berbeda ukuran font atau berbeda ketebalan; ini sedikit mengganggu sebagian user, terutama pada kasus hovered, karena jika link sedang didekati oleh kursor mouse maka aliran teks bisa terganggu; kadang sebagian desainer malah senang karena memperoleh efek teks bergerak-gerak jika link sedang dihover. Lihat Gambar 4 sebagai contoh. Saat dihover, aliran teks berubah; bisa diamati dari lokasi link kedua dan ketiga yang bergeser.
Fig 4. Link hover berubah ukuran
3. membuat state visited link menjadi berpenampilan seperti teks biasa (misalnya: warnanya jadi hitam dan tidak bergaris bawah) atau hilang ke dalam background (dengan mengeset warna visited sama dengan warna background halaman/tabel); kadang-kadang user masih ingin mengetahui link mana saja yang pernah ia kunjungi;
4. membuat huruf teks biasa berwarna-warni, apalagi jika warnanya mendekati warna link;
5. menyamakan warna state visited dan new; ini membingungkan dan memaksa user mengingat-ingat link mana yang sudah dikunjungi dan mana yang belum; Anda bisa rugi juga kalau user jadi melewatkan halaman-halaman yang Anda anggap penting;
6. membuat teks yang bukan link bergaris bawah (<u>). Ini amat membingungkan dan memaksa user “menggerayangi” halaman web dengan mouse untuk mendeteksi keberadaan link. Lagipula perlu diingat bahwa garis bawah hanya pantas dipakai sebagai tanda penekanan di mesin ketik, bukan di komputer. Di komputer gunakan <b> atau <i>. Jadi sebaiknya Anda tidak perlu menyentuh tag <u> sama sekali kecuali jika benar-benar butuh.
Apa tujuan utama kita membuat link? Agar “diklik” orang tentunya. Apalagi jika link tersebut mengacu ke halaman produk atau jasa kita, atau halaman informasi penting yang kita ingin orang membacanya. Bagaimana membuat link agar mengundang orang untuk mengkliknya?
Kita bisa menarik beberapa pelajaran dari sebuah situs ternama yang menurut saya master dalam linking: amazon.com. Perhatikan Gambar 5. Halaman-halaman Amazon amat sangat interlinked. Dari 3 jenis link—navigasi, asosiatif konten, dan Lihat Juga—semua selalu ada di setiap halaman Amazon. Bahkan “link count” (jumlah link di sebuah halaman) Amazon rata-rata di atas 100. Bahkan bisa mencapai 150 ke atas. Sebuah halaman yang mengandung banyak link secara rata-rata akan lebih banyak diklik daripada yang mengandung sedikit.
Amazon pun cukup jeli dalam menggunakan warna link. Dia tidak menggunakan #0000FF yang agak menyakitkan mata, tapi menggunakan warna biru yang lebih teduh. Ini penting karena jumlah link amat banyak. Tapi link tetap dengan mudah terbedakan dari teks lain. Subjudul misalnya, warnanya komplementer yaitu oranye sehingga mudah sekali dibedakan dari biru. Perhatikan bahwa selain untuk link, warna-warna yang dipakai Amazon pun tidak ada yang tajam, pure-hue, dan menyakitkan mata (#FF9900, #00FF00, dsb).
Perhatikan pula bahwa link-link yang ingin lebih ditonjolkan dan berupa judul dibuat cetak tebal sementara link-link biasa dicetak normal, bahkan link-link keterangan tambahan seperti “what’s this” dibuat lebih kecil ukurannya. Gradasi penampilan ini membuat user dapat melihat lebih jelas mana link yang lebih “penting”. Dalam artian, link ke halaman yang levelnya lebih tinggi daripada halaman untuk link non-cetak tebal. Karena jumlah link banyak, maka sebuah link perlu sedikit dibedakan dari yang lainnya agar tidak semua tampil sama dan membuat kewalahan user.
Yang terpenting diperhatikan adalah cara Amazon memberi teks-teks pada link, yang rata-rata berupa instruksi (frase/kalimat imperatif) yang singkat dan jelas. “See details” (bukan hanya “Details” atau “Details of this item”), “rate this item” (bukan “rate this item to get personal recommendations”), atau “Sign in” (bukan “Sign in to turn on …” atau “Click here to sign in …”). Instruksi ini amat membuat jelas sebuah link melakukan apa dan berisi halaman apa. Bandingkan dengan “Details” (tidak ada instruksi), “rate this item to get …” (terlalu panjang), atau “click here to sign in…” (tidak to the point).
Apakah cara Amazon mendesain link efektif? Menurut saya ya. Saya sering tanpa sadar sudah membrowse dan mengklik belasan halaman Amazon. Tapi dengar-dengar, kultur tertentu seperti Italia kurang suka dengan model link berupa instruksi atau “menyuruh-suruh” seperti ini. Barangkali bisa jadi bahan pertimbangan kalau suatu hari Anda mendesain situs untuk orang Italia.
Meski artikel ini nampaknya memberi banyak larangan terhadap penampilan link, jangan takut-takut mengubah penampilan link situs Anda agar unik. Selama link mudah dibedakan dari teks, patokan-patokan lain sifatnya sekunder. Penampilan link yang unik dapat memberi ciri khas pada situs Anda. Dan… banyak-banyaklah melakukan linking. (slm)
[Last-Modified: Mon Aug 19 22:21:22 2002]
| Arsip mwmag | [Files] [Up] | www.master.web.id/mwmag |
