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
1a 1c 1b 1d
1e
1f
Gambar 1
2a 2b
2c 2d
2f
2e Gambar 2
2
3b 3a
3d 3c
3d
Gambar 3
4c
4a
4b
Gambar 4
3
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.
4
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.
5
(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
6
pada halaman Transportation. Pada browser tertulis H.TRANSPORTATION tapi pada halaman tertulis transportation. 8a
8b
8c
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: .gif
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.
7
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 bidangbidang 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.
8
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
9
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.
10
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
11
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 mengkilk 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 Gambar 20 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
12
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 popup 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.
13
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.
14
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.
15
Nama Provinsi Slogan
Logo
Menu tambahan
Menu utama search
go
Breadcrumbs >> breadcrumbs
HEAD LINE NEWS date Lorem ipsum dolor sit
amet, consectetur adipisicing elit, sed do Lorem ipsum dolor sit amet, consectetur eiusmod tempor incididunt ut labore et adipisicing elit, sed do eiusmod tempor dolore magna aliqua. Ut enim ad incididunt ut labore et dolore magna aliqua. enim adquis minim veniam, quis minimUt veniam, nostrud nostrud exercitation ullamco laboris nisi ut exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aliquip ex ea commodo consequat. 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. More… Others NEWS 1 NEWS 2 NEWS 3
Footer
Gambar 21
16
Gambar
Level 3
Level 2
Level 1
Gambar 22
