Standar Antarmuka Halaman Web

Standar Antarmuka Halaman Web
untuk Pengembangan Aplikasi Sistem Informasi
1. Pendahuluan
Penerapan sistem informasi berbasis komputer seringkali tidak berhasil mencapai
tujuan utamanya, yaitu mempermudah pengguna dalam menjalankan tugasnya. Tidak berhasil
dapat berarti tidak mampu memenuhi kebutuhan pengguna, baik dari segi kinerja, kemudahan
ataupun dari segi keamanan. Kegagalan tersebut dapat terjadi karena berbagai faktor,
diantaranya adalah karena tidak adanya panduan atau standar yang dijadikan acuan dalam
mengembangkan perangkat lunak sehingga pengguna mendapatkan produk yang sulit
digunakan.
Salah satu aspek yang perlu diperhatikan untuk meningkatkan kemudahan
penggunaan aplikasi adalah antarmuka aplikasi dengan pengguna. Adanya standar antarmuka
diharapkan dapat meningkatkan kemudahan penggunaan aplikasi, karena pengguna akan
terbiasa dengan antarmuka yang seragam.
Pada makalah ini akan diuraikan standar antarmuka halaman web yang dikhususkan
untuk digunakan pada aplikasi sistem informasi berbasis web di lingkungan akademik. Tujuan
dibuatnya standar antarmuka ini adalah untuk membantu perancang antarmuka dalam
melakukan perancangan antarmuka agar menghasilkan antarmuka halaman web yang
konsisten, sederhana dan kontekstual.
2. Metode
Standar yang dibuat merupakan hasil kajian dari berbagai literatur yang membahas
panduan perancangan antarmuka, baik secara umum maupun spesifik untuk halaman web.
Aspek yang distandarkan adalah tema, yaitu hal-hal yang mampu memberikan kesan tertentu
terhadap suatu halaman web, bahasa yang digunakan, umpan balik bagi pengguna, tata letak,
dan perangkat I/O yang digunakan. Referensi mengenai panduan perancangan antarmuka
yang lebih detail, terutama untuk antarmuka halaman web dapat dilihat di
http://usableweb.com dan http://www.hcibib.org.
3. Hasil
Strategi yang digunakan dalam mengembangkan standar antarmuka halaman web ini
adalah:
1. Menggunakan prinsip-prinsip perancangan antarmuka secara umum.
2. Menggunakan CSS (Cascading Style Sheet) untuk mengatur tampilan halaman web.
3. Memungkinkan pembuatan style yang bervariasi, tanpa mengubah konsistensi tata letak.
Berikut ini adalah penjelasan singkat tentang beberapa aspek penting yang
distandarkan dalam standar antarmuka halaman web ini.
Tema
Tema adalah hal-hal yang mampu memberikan kesan tertentu terhadap suatu halaman
web. Tema yang dicakup dalam standar antarmuka ini meliputi tiga komponen, antara lain
warna, visual style, dan jenis font.
Prinsip utama pemilihan warna untuk halaman web adalah mengatur warna yang
kontras antara warna dasar dengan warna teks sehingga teks mudah dibaca. Warna yang
kontras adalah warna yang memiliki perbedaan komponen brighness yang signifikan
seandainya warna tersebut diukur dengan metode HSB (Hue-Saturation-Brightness). Warnawarna yang memiliki nilai brighness dibawah 50% akan tampak lebih gelap daripada warnawarna dengan brighness lebih dari 50% (warna terang).
Berdasarkan prinsip dasar pemilihan warna tersebut, hanya ada dua pilihan komposisi
warna, yaitu:
1. Warna dasar terang, warna permukaan (foreground, teks) gelap.
2. Warna dasar gelap, warna permukaan terang.
Dengan pertimbangan estetika, maka pilihan pertama lebih tepat untuk dipakai di
lingkungan akademik. Pengguna halaman web lebih mengenal pilihan kedua untuk situs-situs
hacker, para seniman, situs-situs ‘bawah tanah’, dan sebagainya.
Termasuk didalam pemilihan warna disini adalah pemilihan warna untuk link dan
menu. Link dan menu harus memiliki warna yang berbeda dengan teks normal, sehingga
pengunjung mengenali bahwa itu adalah link ataupun menu.
Visual style adalah gaya tampilan bentuk-bentuk bidang yang terdapat pada window
aplikasi atau halaman web, misalnya bentuk button, bentuk menu, logo/gambar, grid pada
tabel dan sebagainya. Tidak ada aturan khusus dalam pembuatan visual style ini, yang
penting indah, sederhana, sesuai dengan konteks halaman, dan tidak membingungkan
pengunjung halaman web. Hal yang harus diperhatikan adalah penggunaan gambar.
Penggunaan gambar sebaiknya tidak terlalu banyak atau menggunakan file berukuran besar
sehingga memakan waktu lama untuk proses loading. Batas maksimum untuk loading adalah
sepuluh detik (dengan kecepatan rata-rata 28,8 Kbps Modem). Lebih dari itu, halaman web
harus dirancang ulang.
Komponen tema yang ketiga adalah jenis font. Berdasarkan pengamatan, kebanyakan
halaman web di dunia tidak menggunakan jenis font yang ‘berekor’. Jenis font yang berekor,
misalnya times new roman, memang mudah dibaca, tapi kurang indah dilihat pada halaman
web. Tulisan berekor dalam halaman web terlihat kaku, dan pengunjung akan merasa seperti
sedang membaca dokumen resmi. Dengan alasan tersebut, standar antarmuka yang dibuat ini
menyarankan untuk tidak menggunakan font berekor. Hal ini tentu tidak bersifat mutlak.
Misalnya, untuk halaman yang memang ditujukan untuk menghasilkan dokumen resmi, boleh
digunakan jenis font times new roman. Contoh halaman web seperti ini adalah halaman
pembangkit dokumen PDF.
Jenis font yang tidak berekor sangat beragam sehingga pemilihan font membuka
peluang untuk mengembangkan imajinasi dan kreativitas perancang. Akan tetapi, satu hal
yang perlu diperhatikan yaitu keterbatasan jenis font yang tersedia pada komputer client
(browser). Pemilihan font harus memperhatikan jenis-jenis font yang dimiliki oleh komputer
client, karena jika font yang didefinisikan pada halaman web tidak dimiliki oleh komputer
client, maka browser akan mengganti font tersebut dengan font default. Font default ini pada
beberapa browser adalah jenis font yang berekor. Untuk menghindari hal tersebut, dalam
standar ini disarankan untuk menggunakan beberapa jenis font sekaligus yang didefinisikan
pada file CSS dengan urutan Verdana, Arial, Helvetica, kemudian Tahoma. Jenis-jenis font
tersebut dipilih karena salah satu atau ketiga jenis font tersebut sudah terinstaasi secara
default pada mesin dengan OS Linux Red Hat 7.3 atau yang lebih baru, dan juga pada
Windows 98/ Me/ NT/ 2000/ XP.
Bahasa
Bahasa memegang peranan yang penting dalam perancangan antarmuka halaman web
karena bahasa adalah media untuk saling berdialog dan berinteraksi. Pemilihan bahasa yang
kurang tepat dapat menyebabkan salah persepsi sehingga berpengaruh negatif terhadap
perilaku pengguna. Yang dimaksud pengaruh negatif disini adalah pengaruh yang
menyebabkan perilaku pengguna tidak sesuai dengan yang diharapkan oleh aplikasi.
Penggunaan bahasa tentu tergantung pada konteks web dan karakteristik pengunjung.
Untuk aplikasi sistem informasi berbasis web di lingkungan akademik di Indonesia, bahasa
yang tepat digunakan adalah bahasa Indonesia yang baku atau formal. Dengan kata lain,
seluruh teks atau label yang muncul di layar harus dalam bahasa Indonesia yang baku atau
formal. Pengecualian tetap ada untuk teks atau label yang sudah umum diketahui kalangan
pengunjung dalam bahasa Inggris, misalnya home, login, logout, dan lain-lain.
Umpan Balik Pengguna
Pengguna (atau pengunjung) pada dasarnya memiliki rasa ingin tahu dan ingin
mencoba. Karena rasa ingin tahu tersebut, seringkali tanpa sengaja pengunjung melakukan
sesuatu yang sebenarnya tidak diinginkannya. Sebagai contoh, apabila menu yang dicoba
merupakan pemicu operasi yang destruktif, misalnya proses penghapusan data. Atau mungkin
juga proses yang dijalankan tersebut adalah proses yang berpengaruh terhadap aplikasi secara
total, misalnya me-non-aktifkan suatu modul. Untuk mengantisipasi hal-hal yang tidak
diinginkan tersebut, perlu dibuat standar bahwa setiap kali ada proses yang destruktif atau
proses yang berpengaruh luas terhadap aplikasi, aplikasi harus memberikan konfirmasi atau
peringatan kepada pengguna.
Sangat penting bagi suatu aplikasi untuk senantiasa memberikan umpan balik kepada
pengguna atas aksi yang telah dilakukannya, karena hal itu akan sangat mempengaruhi
kepuasan pengguna. Untuk itu, perlu dibuat standar bahwa setiap kali suatu proses dilakukan,
berhasil atau tidaknya harus ditunjukkan dengan sebuah pesan. Hal ini berlaku untuk operasioperasi yang menyangkut manipulasi data, seperti penambahan, pengubahan, dan
penghapusan data.
Ada kalanya seorang pengguna juga menginginkan informasi lebih detail tentang
menu atau aksi yang ditawarkan kepadanya. Dalam hal ini sangat tidak bijaksana jika
pengguna dibiarkan trial and error. Pemberian fasilitas bantuan (help) perlu distandarkan,
yakni diletakkan di suatu tempat yang mudah dijangkau oleh pengguna.
Tata Letak
Tata letak sebenarnya adalah bagian dari kreatifitas perancang. Akan tetapi, dalam
situasi tertentu, tata letak perlu distandarkan untuk memberikan lingkungan kerja yang
konsisten bagi pengguna. Dapat dibayangkan apabila pengguna menghadapi tata letak
halaman yang sangat beraneka ragam dalam satu aplikasi. Hal ini tentu akan
membingungkan, atau paling tidak, menguras lebih banyak waktu pengguna untuk
melakukan penyesuaian.
Dari berbagai macam bentuk tata letak yang ada, sebagai standar untuk aplikasi
sistem informasi di lingkungan akademik dipilihkan tata letak seperti pada Gambar 1.
Baris Logo
Header
Top Menu
Body
Footer
Kolom Menu Tambahan
Kolom Menu Utama
Kolom Halaman Utama
Gambar 1. Tata Letak Halaman Web
Tata letak tersebut dibuat sedemikian rupa sehingga tampilannya selalu memenuhi
layar browser (width=100%, height=100%). Baris menu dibagian atas disediakan hanya
untuk jumlah menu yang terbatas. Untuk jumlah menu yang kemungkinannya bertambah
secara tidak tentu (misalnya submenu modul-modul aplikasi), diperlukan kolom menu
sebelah kiri. Kolom menu sebelah kiri ini disebut dengan kolom menu utama. Jika
diperlukan, dapat juga ditambahkan kolom menu tambahan sebelah kanan.
Kolom menu utama (kiri) tersebut dirancang sedemikian rupa sehingga dapat
menampung menu-menu yang panjangnya tidak terprediksi. Pembagian tata letak menu
seperti ini sangat diperlukan, sebab jika seluruh menu diletakkan di bagian atas dan ternyata
panjangnya melebihi panjang layar browser, maka hanya akan ada dua kemungkinan buruk
sebagai akibatnya. Kemungkinan pertama adalah baris menu menjadi bertumpuk, hal yang
tentunya akan sangat merusak tampilan. Kemungkinan kedua adalah pengguna dipaksa untuk
melakukan scrolling kesamping kiri atau kanan, hal yang akan sangat merepotkan pengguna
karena pengguna umumnya (orang Indonesia, dan sebagian besar penduduk dunia) membaca
tulisan secara horisontal, bukan vertikal.
Perangkat I/O
Standar ini mengharuskan minimal ada keyboard dan mouse (atau jenis kakas
pointing lain misalnya trackball) sebagai perangkat input, dan layar monitor sebagai
perangkat output. Ketiga kakas tersebut mutlak diperlukan dalam aplikasi berbasis web
dengan tampilan grafis (GUI).
Untuk halaman yang mengandung form isian, standar antarmuka ini menentukan
bahwa seluruh elemen form harus dapat dijangkau dengan keyboard (tombol tab) tanpa
bantuan mouse. Hal ini untuk membantu pengguna dalam hal kemudahan dan kecepatan.
Khusus untuk halaman web yang mengandung form isian yang terdiri dari beberapa
kolom, standar ini menerapkan sedikit aturan tambahan, yaitu penjangkauannya harus terurut
mulai kolom pertama (paling kiri) dari atas ke bawah, kemudian kolom kedua juga dari atas
ke bawah, dan seterusnya. Hal ini tidak lain adalah untuk menyesuaikan kelakuan aplikasi
dengan kebiasaan manusia sehari-hari, misalnya ketika membaca koran yang memiliki
halaman dengan beberapa kolom.
4. Diskusi
Standar antamuka halaman web ini telah diterapkan pada pengembangan aplikasi
Sistem Informasi Kepegawaian di Departemen Teknik Informatika ITB. Hasil penerapan
strategi yang digunakan pada standar antamuka halaman web yang dikembangkan diuraikan
pada Tabel 1.
Tabel 1. Evaluasi Penerapan Strategi
Strategi
Penggunaan prinsipprinsip antarmuka
secara umum
Penggunaan CSS
Kebebasan
penggunaan style,
dan konsistensi tata
letak
Penerapan Komponen Standard
a. Dalam pembuatan tema, warna dan bentuk menu
konsisten, halaman tidak menampilkan hal-hal yang
tidak perlu seperti huruf berkedip
b. Dalam penggunaan bahasa, pemilihan kata tidak ambigu.
c. Menggunakan umpan balik sesuai dengan konteks
keadaan, yaitu konfirmasi ketika akan melakukan aksi
penghapusan, pesan error, dan tersedianya fasilitas
bantuan.
d. Pengaksesan bagian formulir dengan keyboard sesuai
dengan keadaan di dunia nyata.
Menggunakan CSS untuk mendefinisikan seluruh
komponen tema
a. Style yang dipilih dalam SIPEG adalah flat style, dapat
diubah dengan melakukan perubahan pada file CSS
b. Tata letak konsisten
Meskipun ada beberapa aspek yang bisa berlaku umum, standar antarmuka yang
dikembangkan ini akan berbeda hasilnya apabila tidak ditujukan untuk aplikasi sistem
informasi di lingkungan akademik. Hal ini disebabkan karena adanya perbedaan karakteristik
pengguna di lingkungan akademik dengan lingkungan lainnya.
Evaluasi standar antarmuka yang baik hanya dapat dilakukan apabila standar tersebut
telah cukup banyak diterapkan/digunakan. Dari pengalaman penerapan standar tersebut, dapat
dikumpulkan penilaian baik tidaknya atau lengkap tidaknya standar yang dikembangkan, baik
dari sisi perancang maupun dari sisi pengguna (pengunjung) halaman web.
5. Kesimpulan
Standar antarmuka halaman web yang dikembangkan ini dianggap telah sesuai dengan
prinsip-prinsip antarmuka secara umum, menggunakan CSS dalam penerapannya, dan
memungkinkan pembuatan style yang bervariasi tanpa mengubah konsistensi tata letak.
Kesimpulan ini dibuat berdasarkan hasil penerapan standar antarmuka pada aplikasi Sistem
Informasi Kepegawaian di Departemen Teknik Informatika ITB.
Standar antarmuka halaman web yang telah dibuat ini dapat dianggap lebih lengkap
jika dibandingkan dengan Apple User Interface Guidelines dan lebih khusus, yaitu untuk
aplikasi sistem informasi di lingkungan akademik, meskipun masih memerlukan beberapa
penyempurnaan. Penyempurnaan yang dapat dilakukan antara lain adalah penambahan
panduan konversi kode CSS untuk mengatasi ketidakkompatibelan implementasi CSS antar
browser.
6. Referensi
1. Prastawa, Hannan Gigih. (2005). Pengembangan dan Penerapan Standard Pengkodean
PHP dan Standarad Antarmukan Halaman Web pada Pembangunan Aplikasi Analisis
Kenaikan Jabatan. Laporan Tugas Akhir Tingkat Sarjana. Program Studi Teknik
Informatika ITB
2. Rees, Michael; White, Andrew; White, Bebo. (2001). Designing Web Interfaces. Prentice
Hall PTR.
3. Apple Computer, Inc. (1987). Apple Human Interface Guidelines: The Apple Desktop
Interface. Reading, MA: Addison-Wesley.