LAPORAN AKHIR
M.K INTERAKSI MANUSIA DAN KOMPUTER
SEMESTER GENAP – 2007/2008
Kajian Situs
http://www.riauprovince. com
oleh:
Febrionna Fenrizal
G64051015
(http://fiona42.wordpress.com)
INSTITUT PERTANIAN BOGOR
2008
2
Gambar 1
Gambar 2
1a
2a
1b
1c
1e
1d
2b
2c
2d
2e
1f
2f
3
Gambar 3
Gambar 4
3d
4a
4b
3b 3a
3c
3d
4c
4
1. Nama Domain Akhiran domain .com mengidentifikasikan bahwa Website ini merupakan suatu
perusahaan (com = company). Tetapi sebenarnya Web ini merupakan Web pemerintahan yang
seharusnya menggunakan akhiran go.id yang berarti government yang berlokasi di Indonesia. Dari
segi nama, riauprovince.com mudah diingat oleh user. Penamaan yang menggunakan bahasa inggris
konsisten dengan isi Web yang seluruhnya juga menggunakan bahasa inggris.
2. Pengguna Web (user) Karena ini adalah Web pemerintahan, maka pengguna khusus Web ini didominasi oleh
investor, pegawai pemerintahan dan pengusaha (baik dalam maupun luar negeri) yang memiliki
rentang umur 25 – 60 tahun. Pengguna Web secara umum adalah masyarakat luas. Para investor dan
pengusaha biasanya memerlukan informasi mengenai prospek daerah mulai dari keaadaan ekonomi,
pertahanan, sosial dan keadaan geografis.
3. Penulisan Format Waktu Potensi masalah terburuk dalam usability datang ketika tanggal ditulis hanya dengan
angka seperti pada contoh gambar 1a atau 2b, karena interpretasi tanggal tersebut akan berbeda dari
negara satu ke negara lainnya. Pada Web ini, waktu ditulis dengan format 05/08/2001. Bagi orang
Eropa, penganggalan ini berarti tanggal 5 bulan Agustus 2001. Tapi bagi orang Amerika
penganggalan ini berarti 8 Mei 2001. Sebaiknya penulisan format waktu mengikuti standar
INternasional ISO (ISO 8601) dengan format YYYY-MM-DD. Diamana YYYY adalah tahun, MM
adalah bulan dan DD adalah tanggal.
Web ini juga salah dalam penulisan format waktu. Menurut
http://www.w3.org/TR/NOTE-datetime, penulisan format waktu jam, menit dan detik yang disertai
tanggal yang benar adalah YYYY-MM-DDThh:mm:ssTZD. Dimana hh adalah jam, mm adalah
menit, ss adalah detik, TZD = time zone designator (Z or +hh:mm or -hh:mm). Jadi penulisan waktu
pada contoh gambar a1 adalah 2001-08-05T09:33:25+07.00.
Sebaiknya waktu pembuatan (modified ) Web site tidak perlu ditampilkan pada halaman
Web. Penanggalan dan waktu sebaiknya dicantumkan pada sebuah berita sebagai informasi waktu
upload.
4. Tampilan Web Salah satu ciri Web yang baik adalah kekonsistenan tampilan yang sama pada berbagai
browser yang berbeda. Berikut adalah contoh halaman Web yang dibuka dari 2 browser yang berbeda:
a. Gambar 1 menunjukkan halaman Web yang dibuka melalui browser Internet
Explorer (IE).
b. Gambar 2 merupakan halaman Web yang dibuka menggunakan Mozilla Firefox
dengan resolusi 800 x 600 pixel.
Dari dua jenis browser tersebut, terdapat perbedaan tampilan yaitu logo. Pada IE muncul
logo pemerintahan sedangkan pada browser Mozilla tidak. Begitu juga dengan warna link, pada IE
warna link yang belum di klik berwarna biru sedangkan pada Mozilla berwarna hitam.
Pada bagian bawah menu, ada sesuatu yang seperti gambar yang tidak dapat ditampilkan
oleh browser, baik Mozilla maupun IE. Tidak jelas apakah itu merupakan gambar atau teks. Masalah
tampilan Web ini akan dibahas lebih rinci pada bab berikutnya.
5. Penggunaan Format PNG dan GIF pada Logo Ada dua type format gambar yang biasa digunakan dalam perancangan logo atau gambar
sebuah Web, yaitu GIF (stands for Graphics Interchange Format) dan PNG (Portable Network
Graphics). GIF merupakan format gambar kecil yang menggunakan algoritma LZW. PNG adalah
format file yang extentible terhadap lossless portable dan well compressed storage. PNG juga lebih
rapat (compresses) daripada GIF (5% sampai 25% dalam masalah tertentu). Oleh karena itu logo pada
sebuah Web akan lebih baik jika menggunakan format PNG. Web ini menggunakan format logo GIF
sehingga waktu download sebuah halaman akan banyak memakan waktu. Sebaiknya gambar-gambar
pada Web ini menggunakan format PNG saja.
5
6. Ukuran Monitor dan Resolution Ukuran halaman Web ini dibuat pada resolusi 800 x 600 pixel. Ukuran ini termasuk
ukuran yang umum yang banyak dipakai oleh penguna internet (lebih dari 90% pengguna
menggunakan ukuran 800 x 600, 1280 x 1024 pixel menurut buku Galitz). Ukuran desain ini tentu
saja dapat mengakomodasi sebagaian besar pengguna internet. Bagi user baru, ada petunjuk di bawah
homepage bahawa Web ini akan lebih bagus jika dibuka pada resolusi 800 x 600 pixel. Tapi
penggunaan ukuran ini ternyata membuat user harus mengunakan scroll.
Sebaiknya resolusi tampilan Web ini dirubah menjadi 1280 x 1024 pixel. Karena untuk
kedepannya penggunaan layar komputer akan semakin berkembang. Oleh karena itu harus dilakukan
penyesuaian antara ukuran Web dengan layar monitor user secara berkala. Selain itu perubahan
ukuran tampilan Web akan meminimalisir penggunaan scroll yang terlalu berlebihan.
7. Peta Site (Site Map) Sususnan Web yang bagus dan teratur merupakan salah satu daya tarik Web. Begitu juga
dengan penggunaan dan pengelompokkan link. Web pemerintahan ini mempunyai hirarki yang sangat
buruk. Banyak menu yang bisa mengakses halaman yang sama. Contohnya saja halaman Tourism.
Begitu juga dalam pengelompokkan link yang sangat tidak teratur. Banyak link yang dijadikan menu.
Topik ini akan dibahas lebih lanjut pada bahasan Menu dan Link.
8. Penggunaan Scroll Menurut teori, Web ini salah dalam penggunaan scroll. Scroll umumnya digunakan
untuk menampilkan information hiding akibat resolusi layar, tapi dalam kenyataannya Web ini
menggunakan scroll vertical untuk banner yang menyatu dengan menu (jika dibuka melalui IE). Hal
ini bisa dilihat pada gambar 8c (dibawah). Kesalahan lainnya dapat dilihat pada gambar 3b yang
dibuka melalui IE. Seharusnya scroll yang terdapat di jendela IE di disable saja untuk menghindari
kebingungan user untuk menentukan mana scroll yang seharusnya dipakai. Web ini sama sekali tidak
menggunakan scroll horizontal sehingga tidak akan meyulitkan user dalam membaca tulisan dari kiri
ke kanan.
9. Format Penulisan dan Panjang Kata Format penulisan (rataan teks) yang dimaksud adalah rata kiri, kanan, tengah atau rata
kiri kanan serta pengunaan bold, underline dan sebagainya. Format penulisan Web ini tidak tertata
dengan baik. Format tulisan tidaklah harus sama antara satu halaman dengan halaman lainnya. Yang
terpenting adalah kerapiannya sehingga mudah untuk dibaca. Misalnya saja judul pada halaman
“What’s of Riau” yang mengunakan rata tengah sedangkan kontennya menggunakan rata kanan. Hal
ini menyulitkan user untuk membaca isi dari sebuah halaman. Selain itu penggunaan rata tengah
menimbulkan banyak space kosong. Selain itu penulisan menu pada gambar 1d kurang baik.
Seharusnya format tulisan menggunakan rata kanan saja sehingga lebih terlihat rapi.
Panjang kata dalam sebuah baris juga menjadi perhatian yang serius dalam desain
sebuah Web. Usahakan panjangnya sekitar tujuh puluh karakter atau 10 kata saja. Hal ini dilakukan
untuk meningkatkan waktu bacaan pemahaman user (scottconnect), seperti yang terlihat pada gambar
6. Selain itu karakter yang telalu banyak seringkali dihindari oleh user. Web ini kurang baik dalam
mengefektifkan panjangnya kalimat. Pada halaman “What’s on Riau”, jumlah kata dalam satu baris
lebih dari sepuluh kata. Hal ini tentu saja menyulitkan user untuk mempercepat waktu baca.
Sebaikknya format penulisan halaman ini merujuk kepada gambar 6b. Penulisan judul yang sejajar
dengan paragraf akan lebih mengefektikan waktu baca pengunjung. Meratakan teks pada sebelah kiri
namun tidak meratakan pada sebelah kanan (tidak justify) meningkatkan kecepatan dalam membaca
karena baris lurus pada sebelah kiri dapat meningkatkan kemudahan dalam mencari baris baru.
Ketidak konsistenan gaya penulisan juga bisa menimbulkan salah presepsi pada user.
Lazimnya kata yang bergarisbawahi merupakan sebuah link. Pada Web ini banyak tulisan, termasuk
judul, menggunakan garis bawah. Contohnya pada judul halaman “What’s on Riau”, “Animal
Husbandry”, “Fishery”. Seorang user baru akan menganggap tulisan tersebut merupakan sebuah link
walaupun warna yang digunakan bukan warna standar sebuah link.
6
(a) (b) Gambar 6
10. Logo dan Tag Line Logo merupakan unsur yang sangat penting dalam sebuah Web karena logo dapat
menjadi ciri dan identitas sebuah perusahaan ataupun pemerintahan. Begitu juga dengan slogan atau
tagline yang terletak didekat ID halaman. Menurut Jakob Nielson, logo hendaklah ada pada setiap
halaman Web sebagai tanda bahwa user masih berada dalam site yang ia kunjungi. Pada Web ini, logo
hanya terdapat pada homepage saja. Selain itu Web pemerintahan ini mempunyai logo yang hanya
bisa dilihat jika di buka melalui browser IE. Sedangkan logo bisa dilihat melalui Mozilla jika halaman
browser diperkecil (lebih kecil dari kukuran 800 x 600). Menurut teori, posisi logo yang tepat adalah
disebelah kiri atas. Namun logo pada Web ini diletakkan di pojok kiri atas di bawah nama daerah,
bukan pada posisi kiri teratas. Gambar logo pun hilang timbul dengan waktu periodik yang lama
(gambar 7). Web ini tidak mempunyai tagline sehingga tujuan utama Web tidak tergambar dalam
pikiran user.
Gambar 7
11. Penggunaan Animasi Kehadiran animasi dalam sebuah Web akan menambah kesan ‘hidup’. Tapi penggunaan
animasi ini terkadang membuat Web memerlukan waktu yang lebih lama untuk loading. Web ini
minim sekali dalam penggunaan animasi. Oleh karena itu waktu akses homepage ini tidak
memerlukan waktu yang lama. Satu-satunya animasi Web ini hanya terdapat pada homepage. Animasi
ini terkesan kurang tepat. Karena animasi yang digunakan pada logo (gambar 7). Animasi sebaiknnya
digunakan untuk demo saja bukan pada logo. Sehingga banyak user yang menganggap logo ini
sebagai iklan. Apalagi gambar pergantian logo merupakan sebuah iklan. Penggunaan animasi tidak
hanya berupa gambar yang bergerak. Tapi juga bisa berupa video. Tapi untuk Web pemerintahan,
penggunaan video kurang begitu diperlukan.
12. Page Names Menurut buku Don’t Make Me Think , nama halaman Web harus sesuai dengan apa yang
kita (user) klik agar user tetap mengetahui dimana ia berada saat ini. Begitu juga dengan judul dan
nama halaman mestilah sama (match). Tapi pada Web pemerintahan ini, banyak halaman yang
mempunyai nama yang berbeda dengan judul halaman Web. Apa yang di klik oleh user (baik link atau
menu) mempunyai nama yang berbeda dengan apa yang di klik sebelumnya. Hal ini tentu saja kurang
baik karena akan membingungkan user untuk mengetahui dimana ia berada saat ini. Gambar nomor 8
merupakan halaman Web yang di akses ketika user meng-klik mining and energy. Pada gambar dapat
dilihat bahwa Web title (no 8a) tidak sama dengan judul halaman (8b). Hal yang serupa juga terjadi
7
pada halaman Transportation. Pada browser tertulis H.TRANSPORTATION tapi pada halaman
tertulis transportation.
Gambar 8
Keadaan serupa juga terjadi jika kita membuka menu pada gambar 2f. Halaman yang
dibuka tidak mempunyai judul. Pada browser tertulis “Cannot Find Server”. Masalah judul halaman
juga terjadi di halaman Frame Estate. Judul halaman macth dengan judul halaman, tapi judul halaman
dibuat dua kali tapi dengan ukuran yang berbeda (gambar 18).
Pemberian judul atau nama halaman janganlah terlalu pendek dan jangan pula terlalu
panjang. Judul yang terlalu pendek tidak akan banyak membantu untuk kemunculan pada daftar hasil
pencarian. Judul yang terlalu panjang juga tidak baik karena hanya 60 - 80 karakter yang ditampilkan
di kebanyakan judul jendela, menu dan sebagainya.
13. Banner Banner merupakan sesuatu yang sangat penting dalam Web dan dapat mencerminkan
profile dari ‘si empunya’ Web. Web pemerintahan ini mempunya banner yang bisa dikatakan kurang
menarik dan terlalu simple. Banner Web ini menambah kesan mati pada homepage. Banner pada Web
ini juga tidak konsisten. Setiap menu pada Web ini mempunyai banner yang berbeda-beda. Hal ini
bisa menyebabkan terjadinya kebingungan user untuk mengetahui dimana ia (user) berada. Dibawah
ini merupakan sebagian kecil dari contoh banner yang ada dalam Web ini.
Gambar 9 Gambar 10
Perbedaan tampilan banner tampak jelas ketika kita menggunakan Mozilla (gambar 12)
dan IE (gambar 11) sebagai browser. Sebagian gambar banner tidak dapat ditampilkan oleh Mozilla.
Salah satu contohnya:
Gambar 11 Gambar 12
Keadaan serupa juga bisa dilihat pada gambar 3 dan gambar 4 dimana seluruh gambar
banner tidak dapat ditampilkan oleh Mozilla. Ada sebuah halaman yang sama sekali tidak bisa
memunculkan banner baik dilihat melalui IE maupun Mozilla dan yang terlihat hanyalah tombol
seperti gambar. Tidak jelas apakah gambar ini tidak disimpan di server ataukah memang tidak bisa
ditampilkan oleh browser.
.gif
8a
8c 8b
8
14. Fungsi Search Fungsi search atau pencarian merupakan fungsi yang sangat esensial bagi user.
Terutama bagi Web yang terdiri dari halaman yang sangat banyak (lebih dari seratus halalam).
Walaupun halaman Web ini tidak mecapai seratus halaman, tapi banyak halaman yang redundant
(menu berbeda dengan isi yang sama) menyulitkan user dalam menghafal atau mengingat letak suatu
halaman. Tidak adanya fungsi search menambah point minus pada Web ini. Fungsi search tidak
ditemukan baik pada homepage maupun dihalaman Web lainnya.
Sebaiknya fungsi search dibuat pada setiap halaman Web dan diletakkan di bagian atas.
Fungsi search ini umumnya bisa menampung 5 kata. Proses pencarian sebaiknya hanya dilakukan
dalam Web ini saja. Jika pencarian tidak menghasilkan temuan, maka pesan yang diberikan kepada
user jangan terlalu panjang. Cukup singkat dan jelas, misalnya no result found. Hasil pencarianpun
diurutkan berdasarkan prioritas yang paling banyak dicari oleh user.
15. Ruang Kometar (Feddback) Ruang komentar termasuk unsur yang penting dalam sebuah Web. Karena ruang
komentar bisa menjadi tempat intekasi antara pemilik Web dengan user. Web ini tidak mempunyai
ruang komentar sebagai feedback bagi user sehingga Web ini terkesan semakin terlihat misteri dan tak
bertuan. Sebaiknya Web ini memberikan halaman khusus sebagai tempat interaksi antara user dengan
pemilik Web. Ruang feedback tidak harus ruang komentar, tapi juga bisa forum atau chat online
dengan admin Web. Kegunaan ruang feedback ini bisa menjadi sarana diskusi user dengan admin
dalam merancang dan memperbaiki tampilan Web untuk kedepannya. Karena rancangan Web yang
sesuai dengan selera penggunannya akan menjadi alasan user untuk kembali lagi.
16. Gambar yang bisa di Klik Umunya gambar pada sebuah Web site bukan berupa link. Tapi pada Web ini gambar
gubernur (governor) pada bagian kanan atas (gambar 2 no 2b) dapat di klik dan membuka halaman
baru yang isinya berupa sambutan dari gubernur. Jika halaman ini memang dijadikan link, sebaiknya
bukan berupa gambar sebagai navigasinya, melainkan tulisan yang berupa link (berwarna biru dan
bergaris bawah). Karena umunya asumsi user, gambar tidak bisa di klik.
17. Frame yang Tidak Konsisten Frame merupakan bagian halaman yang tidak akan berubah isinya. Frame pada sebuah
Web sebaiknya konsisten. Web ini tidak menggunakan frame dengan konsisten. Frame halaman yang
satu berbeda dengan halaman lainnya. Ini bisa dilihat pada halaman profile. Tata letak isi suatu
halaman berbeda dengan home page. Begitu juga tata letak pada halaman yang berisi sambutan dari
gubernur.
18. Kontent (Content) Web ini akan lebih baik lagi jika menggunakan dua versi bahasa yaitu bahasa Indonesia
dengan bahasa Inggris. Karena Web pemerintahan ini tidak hanya di akses oleh user dari luar negeri
tapi juga user dalam negeri. Tidak semua user paham dengan bahasa inggris. Bagi user yang tidak
paham bahasa inggris akan memakan banyak waktu untuk belajar dan daripada mencari informasi
dalam Web ini. Hal ini akan menyulitkan user dan tentu saja user akan memilih pergi dari situs ini.
Content atau isi yang menarik dan up to date sangat di senangi oleh user dan akan
membuat user betah dan akan kembali lagi. Secara garis besar, Web ini berisi content pariwisata,
peternakan dan industri yang potensial di provinsi Riau. Walaupun konten Web ini berisikan bidang-
bidang komersial, tetap saja tidak sesuai dengan nama domain yang berakhiran .com. Karena provinsi
Riau bukan sebuah perusahaan melainkan pemerintahan.
Konten dalam Web ini jarang sekali di update atau malah tidak pernah di update. Ini
terlihat dari gambar gubernur yang di tampilkan di pojok kanan atas seperti yang terlihat di gambar 1
no 2b. Kenapa? Karena Saleh Djasit merupakan mantan gubernur Riau yang sekarang menjabat
sebagai anggota DPR RI dan terlibat kasus korupsi pengadaan mobil pemadam kebakaran .
Pada homepage, tidak terdapat penjelasan singkat mengenai situs ini. Bahkan tidak ada
informasi atau berita singkat mengenai provinsi Riau dan di penuhi banyak link yang kurang jelas.
Pada halaman profile sebaikknya dibuat contac person atau alamat lainnya yang bisa dihubungi.
9
Namun situs ini sama sekali tidak mencantumkan informasi apapun mengenai author, email admin
maupun alamat kantor pemerintahan. Sehingga Web ini terkesan sebagai Web tak bertuan dan sulit
untuk dipercaya.
Isi Web ini standar karena dominan berisi keadaan geografis seperti batas-batas provinsi,
luas daerah peternakan dan foto pejabat daerah. Selain itu banyak halaman Web yang mempunyai isi
yang sama. Ada juga halaman yang mempunyai nama menu yang sama tapi berbeda isi. Misalnya
halaman tourism pada homepage dengan halaman tourism yang dibuka melalui menu municipalities
and regency.
Jika kita masuk ke halaman municipalities, maka ada satu sub menu yang isinya tidak
relevant terhadap menu utama. Sub menu tersebut adalah Kepulauan Riau yang isinya berupa peta
daerah Kepulauan Riau beserta link-link yang terkait dengan daerah tersebut. Halaman ini tidak
relevant karena sub halaman lainnya berisi mengenai profile daerah, sedangkan halaman Kepulauan
Riau hanya berisikan peta dan link.
Pada halaman “Regent of Rokan Hilir” (gambar 13), kalimat yang berwarna hitam
mempunyai makna yang kurang jelas. Begitu juga dengan makna kalimat lainnya yang terdapat pada
halaman government (Regent of Natuna, Regent of Dumai dan sebagainya).
Sebaiknya kontent Web ini ditambahkan berita terbaru mengenai provinsi Riau yang
diletakkan pada halaman pertama (homepage). Berita tersebut bisa saja event atau rangkaian acara
mendatang dan info-info ter-update mengenai provinsi Riau disertai dengan gambar-gambar yang
menarik.
19. Typografi Text yang digunakan pada Web ini adalah Times New Roman dan Arial yang berukuran
10 - 12 point. Bagi user yang berusia lebih dari 40 tahun akan merasa kesulitan untuk membaca
tulisan di Web ini karena ukuran teks yang terlalu kecil. Times New Roman termasuk jenis tulisan
yang umum dan tersedia di berbagai sistem operasi. Tapi jika user membuka Web dari sistem operasi
Linux, maka tulisan jenis Arial tidak dapat ditampilkan dan akan diganti dengan type tulisan
Helvetica. Banyak tulisan yang digunakan (baik jenis, ukuran dan warna) tidak konsisten dalam Web
ini begitu juga dalam penulisan navigasi Web. Ukuran huruf yang kecil juga menyulitkan user yang
menggunakan layar monitor yang kecil hingga projektor yang terhubung ke komputer. Meskipun
menggunakan platform yang spesifik, pengaturan teks dapat saja bervariasi.
Pergunakan leading atau jarak baris yang lebih lebar dari default. Mempergunakan
leading 130% dapat memberikan perbedaan yang besar terhadap halaman Web yang Readable. Pada
halaman tertentu terdapat kejanggalan atau kecacatan posisi tulisan. Antara baris atas dengan baris
sesudahnya jarak yang berikan terlalu kecil dan menyebabkan tulisan terlihat bertumpuk-tumpuk.
Berikut contoh screenshoot nya:
Gambar 13
Ketidak konsistenan ukuran huruf bisa dilihat pada gambar 3d dan gambar 4b. Ukuran
font yang dilihat melalui Mozilla lebih kecil dari ukuran font yang dilihat melalui IE.
Bukanya hanya ukuran font yang tidak konsisten, tapi juga jenis huruf dan warna yang
digunakan mempunyai tampilan berbeda pada IE dan Mozilla. Pada IE jenis huruf yang telihat Arial
(gambar 3d) sedangkan pada Mozilla Times New Roman dengan ukuran yang kecil (gambar 4b) tapi
dengan warna yang sama. Pada halaman lainnya, jenis dan ukuran font yang digunakan sama, tapi
warna yang tampil pada IE berbeda dengan warna pada Mozilla. Sebaiknya dalam memilih huruf,
sesuaikan dengan tema Web. Bila pembuat Web menggunakan lebih dari 2 font maka Web akan
nampak seperti “catatan acak”, font berbeda hanya digunakan untuk memberi penekanan atau untuk
membedakan antara konten pada Web.
Ketidakkonsistenan huruf ini bisa dihindari jika pengembang menggunakan CSS
(Cascading Style Sheets). Sehingga ukuran dan jenis tulisan bisa konstan di berbagai browser. CSS
banyak digunakan karena lebih fleksibel, saves bandwith dan mudah untuk diatur ulang.
Penulisan judul peta pada Web ini tidak konsisten, dimana nama daerah menggunakan
huruf besar sedangkan status daerah (regencies) menggunakan huruf kecil. Penggunaan huruf besar
(uppercase) yang dicampur dengan huruf kecil akan menyulitkan pembacaan user. Karena pada
10
dasarnya huruf besar akan lebih sulit terbaca daripada huruf kecil. Sebaiknya penulisan judul peta
menggunakan huruf besar pada awal kata saja. misalnya penulisan BATAM regencies sebaiknya
ditulis Batam Regencies.
Pemilihan font untuk judul pada Web ini kurang tepat. Font yang digunakan jenis
Monotype Corsiva. Jenis font ini kurang cocok untuk situs pemerintah karena kurang melambangkan
ketegasan dan terkesan lembut. Sebaiknya font yang digunakan adalah Arial, Verdana atau Times
New Roman.
Hal lain yang perlu diperhatikan oleh seorang desainer web adalah pengguna yang
mempunyai cacat fisik contohnya buta warna. Pengguna yang mempunyai keterbatasan penglihatan
dapat berarti orang yang setengah buta (penglihatan kurang jelas, buta warna) sampai pada buta secara
total. Pada orang-orang buta secara partial, kesulitan utama terletak pada ukuran teks atau hal lain
hingga ia tidak dapat membaca halaman Web. Hal ini dapat diatasi dengan pengaturan ukuran huruf
pada browser. Pada orang-orang buta warna, penggunaan warna-warna yang rentan lebih baik
dihindarkan, beri warna kontras pada konten dan background. Pada orang-orang buta secara total,
sebuah halaman Web harus dapat diakses dengan baik menggunaan Screen Reader atau Speech
Browser.
20. Footer Menurut buku Galithz, pada bagiaan footer hendaknya ditampilkan pada setiap halaman
dan mencatumkan informasi legal seperti copyright dan tahun pembuatan Web. Web ini sudah
mencantumkan copyright pada footer, tapi tidak pada semua halaman Web. Tampilan footer ini juga
tidak konsisten pada browser Mozilla dengan IE. Ini bisa dilihat pada gambar berikut ini.
Gambar 14 Gambar 15
Pada Mozilla (gambar 14) warna tulisan footer hitam sedangkan pada IE (gambar 15)
warna tulisan footer berwarna oranye dan abu-abu. Posisi footer ini juga tidak konsisten. Lazimnya
footer diletakkan di kaki Web (bagian Web paling bawah). Tapi pada halaman tertentu footer tidak
diletakkan pada posisi Web paling paling bawah, melainkan tepat dibawah paragraf terakhir. Hal ini
bisa dilihat pada halaman sub menu tourism. Sebaiknya footer Web ini cukup dilengkapi dengan
tahun pembuatan Web dan email admin Web dan ditampilkan pada setiap halaman Web.
21. Breadcrumb dan “You Are Here” Web site ini tidak dilengkapi oleh bread crumb. Sehingga menyulitkan user untuk
kembali ke halaman sebelumnya, apalagi Web ini mempunyai banyak halaman dengan berbagai
macam link. Meskipun user dapat memanfaatkan tombol back yang tersedia pada browser, ternyata
tidak semua user dapat memanfaatkan tombol ini untuk kembali ke halaman sebelumnya. Hal ini
disebabkan oleh navigasi Web yang kurang baik dan CSS yang gunakan tidak berjalan dengan baik.
Ketika user mengklik sebuah menu, tanpa sadar user sudah berpindah ke tab atau jendela (window)
baru sehingga ketika tombol “back” di tekan, maka user tidak bisa kembali ke halaman sebelumnya.
Pada homepage-pun tidak terdapat tombol home sebagai keaadan default. Pada halaman
Web lainnya terdapat tombol home, tetapi tidak bisa berfungsi secara maksimal. Jika kita membuka
Web melalui Mozilla, tombol home tidak mengembalikan user ke homepage dari suatu halaman (sub
halaman) melainkan tetap pada halaman yang dikunjungi. Tapi pada halaman tertentu (ex Animal
Husbandry), tombol home dapat berfungsi untuk mengembalikan user ke homepage. Keanehan
tombol home ini juga terjadi di beberapa halaman lainnya. Contohnya saja pada halaman Mining and
Energy, ketika kita masuk ke semua sub halamannya dan meng-klik tombol home, maka isi atau
content Web hilang.
Sedangkan ketika kita mengklik tombol home pada IE, kita bisa kembali ke hompage.
Jadi dapat disimpulkan tombol home pada Web ini hanya bisa bekerja secara maksimal pada browser
IE daripada Mozilla. Sebaiknya Web ini dilengkapi oleh breadcrumbs yang diletakkan pada bagian
kiri atas Web.
11
Jika Web ini tidak mempunyai breadcrumbs, setidaknya kehadiran indikator “You Are
Here” yang dapat membantu user untuk mengetahui posisinya saat menelusuri Web. Web ini
menyediakan indikator “You Are Here”, tapi bagi user yang kurang cermat tidak bisa mengenali
indikator ini. Karena tanda yang digunakan bukan warna, melainkan garis putus-putus yang relative
halus. Indikator ini bisa dilihat pada gambar 13. Sebaiknya media yang digunakan untuk indikator ini
berupa perubahan warna pada tulisan atau pemberian border warna pada background tulisan.
Minimnya keberadaan kedua indikator ini akan membingungkan user untuk
mengetahui dimana ia berada sekarang, kemana seharusnya ia pergi, dari mana ia datang dan kemana
ia bisa mendapatkan informasi dengan cepat.
22. Navigasi dan Link Navigasi yang terdapat dalam Web ini sangat buruk. Bagi user yang baru pertama kali
mengakses Web ini akan merasa binggung untuk mencari menu. Ini terjadi karena :
1. Tampilan menu yang mirip dengan slogan. (gambar 1d)
Tampilan navigasi ini juga berbeda ketika diarahkan pointer. Misalkan pointer kita
arahkan ke menu profile. Pada browser IE, pada bagian bawah pointer akan muncul message box kecil
yang juga bertuliskan profile (gambar 16a). Sedangkan pada browser Mozilla tidak (gambar 16b).
(a) (b)
Gambar 16 Gambar 17
Jenis font yang digunakan untuk menu ini kurang cocok karena lazimnya jenis tulisan ini
digunakan untuk menulis slogan, bukan untuk menulis menu. Walaupun warna tulisan ini berubah
ketika kita mendekatkan pointer mouse (dari putih menjadi hitam), tetap saja user tidak akan ‘ngeh’
bahwa ini adalah menu jika user tidak mengarahkan pointer mouse ke arah tulisan ini.
2. Menu yang mirip dengan link
Menu yang terlihat seperti link ini tampak jelas pada homepage. Coba perhatikan gambar
1e, 2c atau 2d. Seorang user baru akan mengira ini adalah sebuah link. Karena lazimnya tulisan yang
digarisbawahi merupakan link dan warna yang digunakanpun mirip dengan link (warna biru pada IE
(1e) dan warna hitam pada Mozilla (2d)). Umumnya kata-kata yang digunakan sebagai link dalam
Web ini kurang tepat. Biasanya link merujuk kepada alamat sebuah situs, berita yang terkait, atau
untuk download. Tetapi pada Web ini kata-kata seperti What’s on Riau?, Fram Estate dan sebagainya
dijadikan sebagai link. Jadi alangkah baikknya jika redaksi kata-kata yang digunakan dirubah dan
dijadikan sebuah menu.
3. Menu Dua Sisi
Penggunaan menu 2 sisi (pada sisi kiri dan kanan) kurang begitu bagus. Karena jumlah
menu yang banyak akan menyebabkan kebingungan pada user. Sebaiknya menu disebelah kiri
(gambar 1f dan 2f) di antisipasi dengan mengelompokkannya kedalam sub menu yang isinya tentang
pemerintahan. Isi dari menu sebelah kiri ini terkesan membuang-buang halaman alias mubazir. Karena
terlalu banyak space yang digunakan hanya untuk satu menu saja. Misalnya ketika kita membuka
menu Mayor of Batam, isi halaman ini hanya berupa foto dengan jabatan seseorang saja.
Kesalahan fatal dari Web ini adalah pembuatan hirarki halaman Web yang buruk.
Banyak halaman yang dibuat double (reduntdant) dan terkesan mengaada-adakan menu yang sudah
ada (menu yang me-link kehalaman yang sama) tapi dengan tampilan navigasi menu yang berbeda.
Contohnya, halaman Tourism dapat diaksess dengan mengklik tulisan tourism secara langsung atau
masuk kehalaman Investment and Opportunities lalu mengklik Tourism. Tampilan menupun berbeda
pada setiap browser, ini bisa dilihat pada gambar 3c dan 4a. Pada Mozilla ukuran menu lebih kecil
12
Gambar 20
dari tampilan pada IE. Menurut teori, penampilan navigasi menu boleh tidak sama antara homepage
dengan menu lainnya. Tapi perbedaan antara navigasi ini tidak boleh terlalu jauh (Steve K).
Navigasi Web ini memang banyak yang tidak konsisten antara satu dengan yang lainnya.
Tapi ada beberapa halaman yang mempunyai tampilan navigasi yang sama tapi menghasilkan presepsi
yang berbeda oleh user. Contohnya pada gambar screenshoot dibawah ini:
Gambar 18 Gambar 19
Pewarnaan header pada halaman tersebut juga tidak konsisten. Begitu juga pada
pemilihan warna sub menu. Umumnya tulisan yang diberi warna merah merupakan link atau tempat
yang telah dikunjungi sebelumnya. Hal ini tentu saja akan menimbulkan kesalahan presepsi bagi
sebagian besar user. Mereka akan berfikir bahwa menu-menu tersebut (gambar 18) telah dikunjungi
sebelumnya.
Web ini juga kurang bagus dalam pengelompokkan link dan menu. Bagi user yang
awam, akan sangat sulit membedakan tombol menu dan link. Karena banyak menu yang ditulis mirip
dengan link. Contohnya ketika kita meng-klik menu Government Web, maka kita akan masuk
kedalam Web pemerintahan pekanbaru yaitu www.pekanbaru.go.id.
Contoh lainya ketika kita mengklik oil pada gambar 19, maka kita akan mengunjungi
Web PT. Caltex. Hal ini akan mengagetkan user karena tiba-tiba user telah berpindah situs. Apalagi
ketika link tersebut menuju Web yang banyak menggunakan flash (link pemerintah Batam). Sebaiknya
Web ini mengelompokkan link-link ke situs lain kedalam suatu menu dan diberikan deskripsi singkat
mengenai link-link yang ada.
Jika developer Web ini memang bermaksud menjadikan menu yang jangggal (menu
yang menyerupai link) ini menjadi sebuah link, maka cara penulisan link inipun salah. Secara default,
link yang belum pernah dikunjungi berwarna biru bergaris bawah dan akan berwarna merah atau ungu
ketika sudah dikunjungi. Ketika kita membuka Web melalui IE, tampilan link memang berwarna biru
dan bergaris bawah (gambar 1e). Tapi warna link tidak berubah setelah dikunjungi. Lain halnya
ketika kita membuka wab ini melaui Mozilla, link berwarna hitam (gambar 2d) dan akan berubah
warna menjadi merah (gambar 2c). Hal ini terjadi disebabkan oleh CSS pada Web ini tidak dapat
berjalan dengan baik.
Penulisan menu pada Web ini kurang baik. Sebagai contoh menu pada halaman
Geography. Header menu tidak akan terlihat jika dibuka melalui Mozilla (bandingkan gambar 3c
dengan 4a). Penulisan menu ini akan lebih baik lagi jka diurutkan berdasarkan abjad. Apalagi jika
menu yang ditawarkan banyak, seperti menu yang terdapat pada halaman Riau Toursm.
23. Halaman Under Construction Beberapa halaman pada Web ini mengalami under
construction. Contohnya pada halaman Map of Riau. Ketika kita meng-
kilk Natuna, maka peta wilayah Natuna tidak dapat ditampilkan dan
akan tampil gambar seperti gambar disamping ini.
Tombol back pada halaman ini tidak bisa berfungsi untuk
mengembalikan user ke halaman sebelumnya jika dibuka dari Mozilla.
Tapi tombol ini bisa mengembalikan user ke halaman sebelumnya jika
di buka melalui IE. Begitu juga dengan tombol home yang ada pada halaman ini hanya bisa berfungsi
pada browser IE. Sebaiknya jika terdapat halaman yang sedang under construction, navigasi yang
mengarahkan user ke halaman ini di disable saja sehingga user tidak mengklik tombol tersebut dan
tidak menekan tombol back. Sehingga dapat menghemat gerak tangan user dalam mengexplorasi Web
ini.
24. Advertising dan Pop-Up Web merupakan salah satu sarana yang efektif untuk media periklanan. Web ini sama
sekali tidak mempunyai iklan sehingga user mudah dalam menjelajah Web. Disamping itu kehadiran
13
iklan kerap kali mengganggu kenyamanan user karena kemunculan iklan yang sering secara tiba-tiba.
Web ini juga tidak meggunakan pop-up, sehingga pandangan dan konsentrasi user dalam membaca
tetap terjaga. Untuk semua halaman Web, hindari pemakaian advertising dan pop-up yang berbasis
flash. Ini dilakukan untuk mempercepat waktu akses suatu Web. Selain itu penempatan iklan dan pop-
up pada sebuah halaman pemerintah dirasa kurang tepat. Karena kurang mencerminkan ketegasan dan
terlalu bersifat komersial.
25. Keefektifan Penggunaan Halaman (White Sapce) Web ini kurang efektif dalam memanfaatkan halaman. Banyak halaman yang
mempunyai space kosong akibat sedikitnya content yang digunakan (white space). Contohnya
halaman administration yang hanya berisi satu kalimat dan gambar kantor gubernur saja. Sama
halnya dengan halaman yang berisi foto pejabat-pejabat. Terlalu banyak ruang kosong yang
ditimbulkan halaman terlihat kaku dan tidak update dalam informasi. Halaman lainnya yang banyak
menyisakan ruang kosong adalah climate, tourism, animal husbundary.
26. Urutan Sub Menu Untuk memudahkan user dalam penjelajahan, sebaiknya sub menu di buat berdasarkan
abjad. Sehingga user mudah dalam mencari menu yang dimaksud. Salah satu contohnya pada menu
halaman mining & energy (gambar 19), sub menu ditulis tidak berdasarkan abjad. Misalnya user ingin
mencari Quartz, maka user harus membaca satu per satu sub menu. Tentu saja hal ini akan memakan
banyak waktu user untuk membaca. Jika menu dibuat berdasarkan abjad, maka user bisa menghemat
waktu dengan menelusuri sub menu dari belakang (karena huruf Q termasuk abjad akhir). Begitu juga
dengan menu yang terlihat pada gambar 4a sebaiknya diurutkan dalam berdasarkan abjad.
27. Pengaturan Gambar Gambar merupakan unsur yang penting untuk membuat tampilan Web lebih interaktif
dan hidup. Selain itu kehadiran gambar pada sebuah halaman sebaiknya bisa mewakili isi dari
halaman tersebut. Oleh karena itu pengaturan dan pemilihan gambar sangat diperhatikan baik dari segi
posisi, ukuran, kualitas dan type gambar yang digunakan. Ukuran gambar perlu diperhatikan karena
akan berpengaruh terhadap lamanya waktu mendownload halaman Web. Kebanyakan gambar yang
bertype gif pada banner yang terdapat dalam Web ini tidak dapat ditampilkan oleh browser Mozilla.
Pengaturan gambar dalam Web ini kurang bagus dari segi posisi. Gambar yang ditampilkan terkesan
tidak mempertimbangankan keseimbangan (balance) antara tulisan dengan ukuran jendela Web dan
tulisan (paragraf). Contohnya pada halaman Fishery, ukuran gambar sebelah kiri tidak seimbang
dengan gambar yang berada disebelah kanan. Begitu juga dengan gambar yang terletak pada bagian
paling atas. Letak gambar tersebut sangat menjorok ke kiri atas dan sejajar dengan judul halaman
sehingga halaman terkesan berantakan. Terlebih lagi ada gambar yang diputar posisinya sehingga
semakin tidak seimbang terhadap tampilan Web. Kualitas gambar yang digunakan juga kurang bagus.
Banyak gambar yang terlalu kecil sehingga tidak bisa terlihat secara jelas. Tapi ukuran gambar yang
kecil bisa mempercepat waktu download user untuk sebuah halaman.
Pengaturan gambar yang kurang baik juga bisa dilihat pada halaman sambutan dari
gubernur. Ukuran foto gubernur yang bersanding tepat disebelah kiri logo daerah tidak mencerminkan
keseimbangan satu sama lain.
Pemilihan gambar pada Web ini sesuai dengan sub menu atau isi sebuah halaman.
Contohnya gambar-gambar yang terdapat dalam halaman mining & energy. Gambar yang ditampilkan
pada sub menu granite sesuai dengan isi halaman yang membahas granite dan gambar yang
digunakan cukup bisa mewakili isi dari sebuah halaman.
28. Pengaturan Posisi Menu Menu sebuah Web hendaklah di letakkan pada posisi yang sangat strategis agar langsung
tertangkap oleh mata user. Pada Web ini, banyak menu yang diletakkan pada posisi yang kurang
lazim. Contohnya pada halaman Investment and Opportunities pada gambar 21 dibawah ini yang
dilihat melalui Mozilla.
14
Gambar 21
Gambar tersebut terletak di posisi bawah halaman diatas footer. Secara kasat mata
terlihat seperti link, tapi sebenarnya tulisan-tulisan tersebut bukan merupakan sebuah link melainkan
menu. Saat diklik, user tidak akan berpindah ke halaman baru, tapi tetap pada
www.riauprovince.com/oppourtinities.htm. Pada gambar diatas, tulisan yang berwarna hitam
merupakan halaman yang sedang dikunjungi dan seolah-olah berfungsi seperti “You Are Here”.
Tulisan tersebut tidak akan berubah warna jika sudah dikunjungi. Ukuran tulisan ini relative kecil
sehingga sulit untuk dibaca.
Pada homepage, menu utama (gambar 1d) sebaikknya diletakkan di bagian atas saja. ini
dilakukan agar menu dapat secara cepat ditangkap oleh mata manusia dan di urutkan berdasarkan
abjad.
29. Membuka Window Baru Salah satu hal yang tidak disukai oleh user adalah berpindah halaman secara tiba-tiba.
Banyak menu dan navigasi Web ini menyebabkan user berpindah ke halmanan baru. Misalnya ketika
user mengklik government Web maka user akan berpindah ke Web pemerintah riau. Contoh lainnya
ketika user mengklik oil pada menu mining & energy maka user akan berpindah ke halaman PT
Caltex. Contoh lainnya ketika kita menelusuri menu gambar 19. Jika user telah menjelajah semua
menu dan mengklik lagi salah satu menunya, maka secara tidak sadar user akan berpindah ke window
baru.
30. Peta Web ini memberikan fasilitas peta pada user, tapi peta yang disajikan dalam Web ini
mempunyai banyak kekurangan antara lain :
1. Tidak memiliki arah mata angin.
Mata angin diperlukan user untuk mengetahui posisi daerah terhadap bumi.
2. Tidak mencantumkan skala.
Tidak adanya skala pada peta akan mempersulit user untuk memprediksi luas suatu
bagian daerah pada peta. Sebaiknya Web ini memberikan skala pada peta. Skala yang
digunakan bisa berupa angka maupun grafik. Tapi sebaiknya skala yang digunakan
berupa grafik agar mempermudah user dalam perbandingan gambar dengan ukuran yang
sebenarnya.
3. Tidak menyediakan legenda.
Penggunaan legenda akan mempermudah user untuk mengetahui kota kota kecil yang ada
dipeta. Tanpa adanya legenda user sulit untuk menerjemahkan simbol-simbol yang ada
dipeta seperti simbol pesawat dan garis batas suatu wilayah.
4. Peta yang terlalu kecil.
Ukuran peta yang ditampilkan relative kecil dan terlihat seperti screenshoot. Sehingga
user sulit untuk mengetahui batas-batas suatu daerah.
31. Penggunaan Flash dan PDF Flash merupakan salah satu unsur yang menambah kesan ‘hidup’ pada sebuah Web.
Penggunaan flash yang berlebihan terkadang membuat sebuah Web sulit atau lama untuk di akses.
Sehingga banyak user yang memiluh untuk kabur. Web ini tidak menggunakan flash, sehingga waktu
akses Web ini tidak terlalu lama. Tapi Web ini mempunyai link yang membawa user mengakses
sebuah Web yang full flash. Contohnya Web PT.Caltex dan Web pemerintahan kota Batam. Jika
pembuat web ingin menggunakan flash, tes terlebih dahulu waktu download dari menu tersebut.
Jangan sampai pengunjung menunggu lama untuk dapat melihat menu. Pada browser yang tidak
terdapat plugin Flash, navigasi ini tentu saja tidak akan tampil. Beri alternatif bagi pengunjung yang
menggunakan browser yang tidak terinstall flash player.
15
Penggunaan file bertype PDF sangat dihindari oleh user. Karena kemunculan file
bertype PDF akan memperlambat waktu akses internet. Selain itu user yang tidak memiliki program
Acrobat harus mendownload software instalernya untuk bisa membaca file ini. Web ini sama sekali
tidak menggunakan file PDF. Sehingga tidak akan merepotkan user dalam mencari informasi.
32. Efek 2D yang berlebihan Web ini menggunakan efek dua dimensi untuk menggambarkan frame. Penggunaan efek
ini terlihat jelas jika user membuka Web menggunakan browser Mozilla. Contoh penggunaan efek ini
bisa dilihat pada halaman mining & energy. Frame-frame pada menu ini banyak menggunakan efek
border yang berlebihan. Selain frame, gambar-gambar yang ada pada halaman ini juga diberi efek
border. Bentuk border antara frame dengan gambar berlainan jenis. Hal ini berdampak terhadap
kenyaman mata user dalam menjelajah halaman Web ini.
33. Kombinasi Warna Kombinasi warna sebuah Web sangat menentukan kenyamanan user dalam menjelajah
sebuah Web. Kombinasi warna yang bagus akan menambah kesan hidup pada sebuah Web. Web ini
menggunakan warna 2 warna utama yaitu hijau dan putih. Pemilihan warna hijau sebagai dasar atau
warna utama tepat. Karena sesuai dengan warna dasar logo daerah riau yaitu hijau. Untuk pandangan
pertama, Web ini terkesan mati dan kaku, karena warna yang digunakan kurang mencerminkan tujuan
dan profile Web ini. Sebaiknya perpaduan warna pada Web ini lebih dihidupkan lagi dengan
menggunakan warna-warna yang terang yang dapat dipadukan dengan warna hijau.
Kombinasi antar warna pada Web ini kurang bagus karena banyak menggunakan warna
yang kontras satu sama lainnya. Contohnya pada halaman municipal, warna background hijau terang
yang dicampur dengan putih akan menyulitkan user dalam pembacaan. Begitu juga dalam pewarnaan
judul sebuah tulisan. Warna yang digunakan senada (maksudnya sejenis) dengan warna background.
Begitu juga dengan halaman transportation, warna tulisan (abu-abu) terlihat tenggelam
oleh warna background putih. Kombinasi antara tulisan dengan background ini semakin terlihat
tenggelam dengan penggunaan warna gambar yang suram (keabu-abuan).
34. Saran Dari hasil analisis Web pemerintahan diatas, maka saya menyarankan untuk merubah
tampilan homepage web ini (saran lainnya sudah dijabarkan dipembahansan sebelumnya) dan
pengoptimalan penggunaan CSS. Berikut ini adalah gambar homepage yang saya rekomendasikan
untuk pengembang Web.Hirarki atau struktur Web ini juga harus mengalami perubahan agar tidak
membingungkan pengguna dalam pencarian informasi. Pada hirarki (gambar 21) menu tourism dan
municipalities & regencies bukan mengakses halaman yang sama. Tapi mengakses halaman halaman
kota-kota yang mempuyai obyek pariwisata (kota kecil di Riau =Regencies of Riau). Begitu juga
dengan menu municipalities & regencies.
16
Lorem ipsum dolor sit amet,
consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et
dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud
exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.
Logo Nama Provinsi
Slogan
Menu
tambahan search
Breadcrumbs >> breadcrumbs
HEAD LINE NEWS date
More…
Others
NEWS 1
NEWS 2
NEWS 3
Footer
Menu utama
Gambar Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat
nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id.
go
Gambar 21
Level 1
Level 2
Level 3
Gam
bar 22