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