Kesuksesan sebuah web
tergantung kepada bagaimana web
tersebut memanjakan user dengan
membuat task-task yang mudah diikuti oleh user
dan menyesuaikannya dengan userexperience. Pengalaman setiap user dalam menjelajahi web berbeda-beda. Oleh karena itu, user dibedakan menjadi low-experienceuser dan high-experienceuser. Faktor-faktor yang membedakan
kedua jenis user ini adalah sebagai
berikut:
1.Sudah sejak kapan seorang
user menjelajahi internet
2.Berapa jam per minggunya user menggunakan internet
3.Sudah seberapa ahli
seorang user dalam menggunakan
fasilitas-fasilitas di internet
4.Kemampuan user
menyelesaikan masalah komputer
5.Seberapa jauh seorang user mengikuti perkembangan teknologi
Kegagalan-kegagalan yang dialami user dalam menjalankan task-task
yang ada akan menyebabkan user
beralih ke web yang lain. Jika dalam
waktu sekitar satu menit 49 detik user
tidak dapat menemukan apa yang dia inginkan, maka user pun akan beralih. Dan diperlukan waktu tiga menit 49 detik
bagi user untuk menjalankan task.
Pada tampilan awal situs Bank Indonesia, user dapat memilih untuk menjelajahi
situs dalam Bahasa Indonesia atau Bahasa Inggris. Navigasi pemilihan bahasa
cukup baik karena perbedaan warna dan peletakkannya di tengah-tengah halaman
membuat user menyadari bahwa itu clickable. Navigasi yang diberikan pada
halaman ini, seperti Data Informasi Bisnis Indonesia, Investor Relation Unit,
Links, Syarat & Kondisi, Kontak BI, dan Site Map, tertata dengan baik dan
mudah diikuti. Data Informasi Bisnis Indonesia dan Investor Relation Unit
dibuat dengan image yang timbul
keluar sehingga terlihat clickable. Jika
pada halaman ini kita langsung mengklik link
navigasi selain pemilihan bahasa, kita akan masuk ke halaman berbahasa
Indonesia sebagai default-nya,
kecuali untuk navigasi ke Investor Relation Unit. Sayangnya logo yang terletak
di kiri atas dan di tengah-tengah halaman bukan merupakan link yang dapat mengantarkan user
ke homepage yang secara default berbahasa Indonesia.
Gambar
2.
Header pada halaman Home versi Bahasa Indonesia
Logo merupakan sebuah identitas.
Dengan melihat logo, orang-orang dapat mengenali empunya logo. Oleh karena itu,
logo harus diletakkan dengan tepat sehingga dapat terlihat oleh user. Maka semakin sering user mengunjungi web, semakin terkenal pula web
tersebut berikut logonya. Pada Gambar 1
dan Gambar 2, logo tepat berada di
kiri atas halaman dan hanya berupa image
tanpa link kemanapun. Peletakkan logo
di kiri atas halaman merupakan hal yang tepat namun sayangnya logo tersebut,
baik yang di Gambar 1 maupun Gambar 2, tidak berupa link yang dapat mengantarkan user kembali ke homepage.
Breadcrumb merupakan petunjuk
alur yang dilalui user untuk bisa
sampai ke halaman yang sedang dia jelajahi. Dengan adanya breadcrumb,user dapat kembali
ke halaman sebelumnya dengan mudah. Gambar
3 merupakan gambar breadcrumb dimana
user sedang dalam halaman “BI Rate”. Breadcrumb untuk halaman-halaman
sebelumnya yang telah dilalui user
ditampilkan dalam bentuk navigasi berupa link
yang berwarna biru dan digarisbawahi, sedangkan untuk menampilkan halaman yang
sedang dijelajahi ditampilkan dengan warna yang berbeda, yaitu hitam. Pewarnaan
ini mempermudah user untuk mengetahui
tulisan mana yang merupakan link dan
mana yang bukan link. Pemisahan breadcrumb dengan menggunakan tanda
“>” juga semakin memperjelas tulisan.
Jika dilihat secara keseluruhan, user yang memiliki experience yang rendah mungkin akan kesulitan menemukan form untuk search. Kata-kata “Tentang Portal BI”, “Syarat-syarat”, “English
version”, textbox, dan tombol Go yang
disatukan dalam satu box di kiri atas
serta tidak adanya tulisan “Search” akan menyebabkan keambiguan. Box tersebut dapat disalahartikan user. User dapat mengira bahwa yang ada di box tersebut merupakan sesuatu yang berhubungan dengan portal BI,
namun sama sekali tidak berpikiran mengenai search.
Hal ini disebabkan karena pengelompokkan yang salah. Seharusnya search tidak ikut dimasukkan ke dalam box tersebut. Form search sering terlihat berada di bagian kanan atas web berupa sebuah texbox dan tombol Search.
Kalaupun ingin menggunakan tombol Go, maka format berikutlah yang mudah
dimengerti:
Search:
Lagipula, tulisan “Tentang Portal
BI” dan “Syarat-syarat” tidak baik untuk digunakan karena tidak memberikan
informasi apapun dan tidak jelas kegunaannya. Tulisan-tulisan tersebut juga
bukan merupakan link yang memberikan
informasi lebih jauh. Dan jika diubah menjadi link pun tidak akan sesuai pada tempatnya. Jadi sebaiknya dihapus
saja.
Tulisan “English version” yang
terletak di atas form search tersebut
juga memberikan kesan bahwa hasil yang akan didapat setelah memasukkan keyword berupa hasil dalam versi
berbahasa Inggris. Maka sekali lagi, tata letak harus lebih diperhatikan.
Search
engine pada
web ini juga tidak berfungsi
sebagaimana mestinya. Seharusnya, sebuah searchengine dapat memberikan informasi
mengenai apa yang user cari dan menampilkannya
pada halaman web. Pada saat dites, user memberi masukan keyword dari informasi yang dia cari,
kemudian mengklik tombol Go. Namun ternyata tombol Go tidak berfungsi sebagai apapun.
Searchengine tidak bekerja. Untuk mengatasi hal ini, user mencoba menekan tombol Enter pada keyboard setelah memberi masukan keyword. Search engine
mulai terlihat sedang bekerja, namun ternyata akhirnya kembali ke halaman saat
dia mengklik Enter tadi dan tidak ada peringatan apapun. Kegagalan-kegagalan
semacam ini dapat menyebabkan user
meninggalkan web yang sedang dia
jelajahi.
Hanya terdapat satu link navigasi pada header. Header terlihat
kosong. Link-link navigasi yang
penting tidak ditaruh di header.
Padahal user memiliki kecenderungan
untuk mencari navigasi di bagian header.
Link navigasi yang
lain diletakkan pada footer. Hal ini
sangat tidak sesuai dengan userexperience.User
akan kesulitan mencari link
navigasinya. User yang sudah tahu
letak link navigasi juga akan tetap
kesulitan untuk mengkliknya jika konten pada halaman yang dia jelajahi
memanjang ke bawah. Konten yang banyak menyebabkan user tersebut harus melakukan scrolling
terlebih dahulu hanya untuk menuju link navigasi
yang ada pada footer. Jika link navigasi yang ingin diperlihatkan
merupakan link navigasi yang bersifat
penting dan strategis, misalnya Peta Situs (Site
Map), maka letakkanlah di tempat yang strategis pula, yaitu header.
Jika pertama kali melihat
potongan gambar yang dibatasi dengan garis merah (Gambar 7), user akan
sulit menyadari bahwa itu merupakan menu. Pada awalnya, user berkemungkinan mengira bahwa itu merupakan Info Penting (lihat
lingkaran merahnya). Hal ini menimbulkan pertanyaan, mengapa tag Info Penting berada di bawah dan
bukan di atas info-infonya?
Ternyata tulisan Info Penting
dapat diklik dan memperlihatkan daftar judul info penting yang sebenarnya.
Lantas apakah yang sebenarnya ada di atas tag
Info Penting? Setelah mouse mulai
bergerak menyusuri baris-baris di atas tag
Info Penting, terlihat tanda-tanda bahwa daftar tulisan itu adalah navigasi
menu web ini. Tanda-tandanya terlihat
dari adanya perubahan warna saat di hover
oleh mouse dan munculnya dropdownmenu. Sayangnya, perubahan warna saat di hover tidak terlalu kontras sehingga dapat terlewat oleh mata yang
kurang awas. Dan lagi tidak semua menu memiliki lebih dari satu level sehingga dropdown menu tidak keluar.
Selain itu, penggunaan dropdown menu cukup mengganggu jika
level kedalamannya tinggi. Oleh karena itu, hindari penggunaan menu dengan
level kedalaman yang tinggi (lihat Gambar
9).
Navigasi menu juga tidak
konsisten. Pada gambar di atas, tidak terlihat lagi ada tag Info Penting. Selain itu, sebenarnya Info Penting juga sudah
terdapat pada menu (lihat Gambar 9).
Isi dropdown menu pada Info Penting
sama persis dengan Gambar 8.
Gambar
10
memperlihatkan menu yang sama antara menu level dua dan menu ada di kolom
konten bagian atas, sedangkan Gambar 11
memperlihatkan bahwa tidak semua halaman yang mengakses menu level dua memiliki
menu yang sama pada kolom konten bagian atas.
Dan satu lagi hal penting lainnya adalah urutan
menu. Jika Gambar 10 dan Gambar 11 diperhatikan, maka dapat
dilihat bahwa menu tidak tersusun secara alfabetis. Lantas berdasarkan apakah
menu tersebut diurutkan? Padahal sebaiknya menu disajikan secara alfabetis atau
diurutkan dengan dasar-dasar tertentu yang umum diketahui oleh user.
Seputar Info yang diperlihatkan
pada Gambar 12 merupakan link-link berupa judul-judul informasi
yang bergerak naik. Teks yang bergerak seperti ini menyebabkan beberapa
kesulitan. Bisa jadi kemampuan scanning dari
user lebih cepat dari gerak teks.
Atau bisa jadi user ingin membuka
informasi yang baru saja terlihat di textboard-nya
namun kelewatan. Maka user tersebut
harus menunggu beberapa waktu untuk melihat informasi tersebut. Hal ini akan
memakan waktu yang lama untuk melihat informasi tertentu jika informasi yang
disajikan sangat banyak.
Ternyata icon tersebut berupa gambar printer.
Namun tidak semua user dapat mengerti
arti gambar tersebut. Akan lebih baik jika ada tulisan ”Print” di samping kanan
icon tersebut. Selain itu, gambarnya
terlalu kecil dan kurang jelas. Namun apakah Print perlu diperlihatkan jika konten halamannya seperti
gambar-gambar di bawah ini:
“Print” sebaiknya dihadirkan pada
halaman-halaman yang memperlihatkan artikel dan informasi yang berupa grafik,
tabel, berita, dan lain-lain dan diletakkan di atas konten tersebut sehingga user menyadari kehadiran fasilitas
tersebut.
Pengamatan terhadap situs Bank Indonesia (http://www.bi.go.id) ini dilakukan dengan menggunakan PC
Desktop yang memiliki resolusi layar 1280 x 800 pixels. Web ini bersifat dinamis dalam tampilan dan tidak menetapkan ukuran
resolusinya. Sehingga berapapun resolusi layar dari user, web dapat dilihat
tanpa harus melakukan scrolling ke
kanan dan ke kiri.
Ada beberapa kasus di mana user harus melakukan scrolling yang sangat panjang dari atas ke bawah untuk melihat
informasi. Contohnya adalah pada saat membuka Peta Situs. Seharusnya scrolling yang sangat panjang dapat
dihindari. Lihat gambar berikut:
Gambar
15. Potongan Gambar
Halaman dengan Scrolling yang Panjang
Gambar di atas merupakan potongan
gambar halaman web ini yang
memerlukan scrolling terlalu panjang
untuk melihat keseluruhan Peta Situs. Ruang kosong (empty space) yang dipakai terlalu lebar. Padahal ruang kosong
tersebut dapat dipakai untuk mengatasi permasalahan scrolling yang terlalu panjang. Cukup dengan menambahkan dua atau
lebih kolom pada ruang kosong, scrolling
dapat dikurangi sekitar 60%.
Untuk mempertahankan user agar tidak kabur dari web, web
harus menyajikan informasi yang menarik dan up-to-date
bagi user-nya. Web harus dikelola isi kontennya. Jangan biarkan user melihat informasi yang tidak
bernilai karena hal tersebut cukup membuang-buang waktu user. Contohnya ada pada saat user
ingin melihat informasi survey:
Pada gambar di atas, ada polling mengenai sistem pembayaran.
Namun sama sekali tidak ada pertanyaan survey.
Tanpa pertanyaan sama sekali, tentu tidak ada informasi yang bisa dikirimkan ke
server. Oleh karena itu, tombol Kirim
di-disable. Jadi untuk apa survey ini disajikan kepada user? Apakah pertanyaan survey bisa dijawab kembali dengan
mengklik tombol Ulang? Ternyata tidak. Setelah tombol Ulang diklik, user akan digiring kembali ke halaman
ini tanpa ada perubahan apapun. Jadi untuk apa ada tombol Ulang? Informasi
seperti ini kembali menimbulkan pertanyaan. Apakah proses survey telah selesai dan user
hanya dapat melihat hasilnya saja? Berikut tampilan setelah tombol Hasil Survey
diklik:
Dengan melihat angka 0% di atas,
timbul pertanyaan baru. Apakah ada yang pernah mengisi survey-nya? Sepertinya tidak. Jadi untuk apa kontenyang tidak memberikan informasi apa-apa
seperti ini ditampilkan?
Font-face yang dipakai
pada web ini termasuk baik karena
tidak menggunakan stroke pada tiap
ujung karakternya. Penggunaan stroke pada
konten web akan menyebabkan user kurang nyaman dalam membaca. Font-face yang digunakan juga konstan
tanpa perubahan. Perubahan hanya terjadi sedikit untuk tag-tag judul seperti gambar di bawah ini (lihat tulisan
“Statistik” dan “Seputar Info”) dan tidak memberikan pengaruh yang buruk pada
konten web:
Perbedaan font-weight, font-style, dan
font-color juga tidak ada masalah,
kecuali pada bagian navigasi menu (lihat pembahasan 6). Penggunaan font-weight bold tepat digunakan pada
judul-judul informasi dan tag-tag pada
konten web. Penggunaan font-style underline dan font-color blue juga tepat digunakan
untuk menunjukkan bahwa tulisan tersebut merupakan link. Namun font-size
yang digunakan memang agak kecil.
Pada Gambar 19, penyajian informasi terbaru di buat dalam format tanggal
serta judul informasi yang berupa link
ke informasi sebenarnya. Namun terkadang “sekedar” judul saja tidak akan
memuaskan para user yang sedang
menjelajahi web. Terkadang user hanya ingin membaca inti dari
informasi tersebut (seperti abstraksi) tanpa harus membaca seluruh informasinya
atau melihat apakah memang informasi tersebut termasuk dalam konteks hal yang
sedang ia cari. Hal ini juga penting bagi pemilik web karena dapat memancing user
untuk semakin penasaran melihat isi informasi. Berikut contoh format yang baik:
[Tanggal]
[Judul Informasi]
[Dua sampai tiga baris abstraksi tentang informasi
tersebut]
Penggunaan kolom
pada web ini tidak konsisten. Pada
awal masuk homepage, web disajikan kepada user dalam tiga kolom. Kolom pertama
berisi menu dan lain-lain, kolom kedua berisi konten dari web, dan kolom ketiga berupa info-info.
Padahal dengan
menggunakan ruang kosong seperti gambar di atas di atas, web tetap dapat disajikan dalam tiga kolom sehingga lebih
konsisten. Jadi setiap membuka halaman baru, kolom yang paling banyak mengalami
perubahan hanya kolom yang berisi konten.
Peta Situs disajikan memanjang ke
bawah sehingga perlu scrolling yang
panjang untuk melihat seluruh peta. Ruang kosong yang diperlihatkan
terlalubanyak sehingga terlihat boros
tempat (lihat Gambar 15). Peta Situs
perlu dibuat dalamtiga sampai empat
kolom untuk menghemat tempat.
Pada sebuah web yang baik, link yang
pernah diklik akan mengalami perubahan warna. Namun tidak demikian pada Peta
Situs web ini. Hal ini menyebabkan user yang ingin mengeksporasi web ini melalui Peta Situs menjadi
kesulitan. User bisa saja lupa link mana yang sudah ia kunjungi. Jika user lupa ia sudah menjelajah sampai link yang mana, ia harus mengecek
kembali link-link yang ada pada Peta
Situs. Hal ini tentunya membuang-buang waktu dan dapat menyebabkan user kabur.
Peletakkan
alamat Humas BI dengan center alignment
menyebabkan ketidak konsistenan pada halaman ini (lihat Gambar 22). Seharusnya alamat tersebut diratakirikan saja seperti
tulisan yang lain di halaman ini. Pemilihan kata-kata “Atau email melalui form
di bawah ini” juga kurang tepat. Seharusnya kata “email” diganti dengan kata
“kirimkan email” karena “email” bukan merupakan kata kerja. Pemilihan label
untuk form di atas tidak konsisten
karena penggunaan bahasa yang tidak konsisten. Label “Nama” dan
“Pertanyaan/Saran/Komentar” menggunakan bahasa Indonesia. Sedangkan label
“Subject” mengggunakan bahasa Inggris. Penggunaan label “E-mail” dalam Bahasa
Inggris tidak akan menimbulkan masalah karena “E-mail” lebih umum digunakan
daripada “Surat Elektronik”. Pemilihan label “Pertanyaan/Saran/Komentar” juga
tidak baik. Terlalu banyak “/”. Padahal label tersebut dapat dipersingkat menjadi
“Pesan” atau “Message”. Peletakkan textarea
untuk mengisi “Pertanyaan/Saran/Komentar” juga tidak konsisten, seharusnya
diratakan dengan textbox yang di
atasnya. Dan hal yang aneh adalah adanya fasilitas print untuk konten halaman seperti ini.
Pada konten laporan yang terlihat
seperti artikel (lihat Gambar 23),
ada pilihan untuk dapat melihat laporan selengkapnya. User akan beranggapan bahwa link
menuju laporan selengkapnya akan berupa laporan yang lebih lengkap yang masih
berada dalam halaman konten web Bank
Indonesia.
Namun ternyata user akan di bawa ke halaman lain di
mana user diberikan link untuk men-downloadlaporan dalam
format zip (lihat Gambar 24). Jika link tersebut hanya menuju halaman lain
yang menunjukkan link untuk download laporan, mengapa tidak dari
awal saja langsung memberikan linkdownload laporan tanpa harus menuju ke
halaman lain? Dengan menuju ke halaman lain terlebih dahulu, efektifitas akan
berkurang.
Gambar
25 merupakan
tampilan awal saat user ingin melihat
data statistik. Permasalahannya sama seperti pada Peta Situs, yakni link yang telah diklik tidak berubah
warna dan scrolling yang sangat
panjang.
Berikut ini merupakan potongan
gambar form untuk melihat Posisi Giro
pada Bank Umum menurut Golongan Pemilik Outstanding of Demand Deposits of
Commercial Banks by Ownership (Gambar 26).
Untuk dapat melihat tombol Submit Query, user
harus melakukan scrolling yang sangat
panjang dari atas ke bawah. User
berkemungkinan tidak menyadari adanya tombol ini jika user malas melakukan scrolling.
Gambar
26. Form Penyajian Informasi Data Statistik
User hanya
diperbolehkan untuk melihat data statistik Posisi Giro ini satu-satu, misalnya
“Rupiah dan Valuta Asing – BPR” saja atau “Rupiah dan Valuta Asing –
Perorangan” saja. Hal ini tentu menyebabkan ketidakefektifan ketika user ingin melihat beberapa data statistik.
Sebaiknya input radio diganti dengan input checkbox sehingga user dapat memilih data-data statistik
mana saja yang ingin dia lihat secara langsung. Ditambahlagi box kecil yang terlihat di bawah input radio terlihat cukup menggangu.
Pemborosan ruang kosong dan scrolling yang sangat panjang juga
terjadi saat tombol Submit Query diklik.
Gambar
27. Pemborosan Scrolling pada Informasi Data Statistik
Untuk melihat grafik inflasi, user harus mengklik link seperti yang terlihat pada Gambar 28. Grafik akan muncul dalam new window yang berukuran kecil dan kemunculan new window adalah hal yang sangat tidak diharapkan. Padahal masih
banyak ruang kosong yang dapat digunakan untuk langsung menampilkan grafiknya.
Situs Bank Indonesia ini sudah
baik dalam pemanfaatan white space.
Tipografinya juga tidak bermasalah. Penggunaan font-nya sesuai pada tempatnya Sayangnya sering terjadi kasus di
mana terlalu banyak scrolling-scrolling panjang dan pemborosan ruang
kosong.
Kesalahan berikutnya terdapat
pada Navigasi Menu. User sulit menyadari
bahwa itu merupakan menu kecuali user menemukan
dropdown menu saat mouse-nya tidak sengaja bergerak ke
sana.
Navigasi link diharapkan dapat berubah warna setelah diklik. Terutama untuk
penyajian informasi seperti Peta Situs atau Data Statistik yang menyajikan
banyak link. Hal ini dikarenakan user berkemungkinan besar lupa akan link-link mana saja yang sudah dia
jelajahi. Jika user lupa, pengecekan
kembali link-link oleh user akan mengurangi keefektifan.
Dan kesalahan yang paling fatal
adalah fasilitas searching yang tidak
berfungsi sebagaimana mestinya. User
sangat membutuhkan fasilitas ini untuk mendapatkan informasi yang dia inginkan
secara cepat.
