Web Usability
Pernahkah Anda memasuki suatu website dan mengalami kesulitan saat mencari informasi yang ada di dalamnya? Saat Anda membuka suatu artikel menarik, Anda juga diharuskan untuk mendaftarkan diri terlebih dahulu dengan proses yang sangat panjang.
Apakah Web Usability itu?
Secara umum, usability berarti bagaimana user dapat belajar dan menggunakan suatu produk untuk mencapai tujuan yang ia harapkan serta seberapa baik pengalaman yang didapat user saat produk itu digunakan. Berkaitan dengan Web Usability, tentunya produk yang dibicarakan di sini adalah website.
Setiap tahun, semakin banyak pengguna website yang kehilangan kesabarannya. Mereka tampaknya semakin meninggalkan kemauan untuk belajar bentuk atau teknik interaksi baru pada website dan tidak bertoleransi lagi dengan proses download atau loading yang lambat. Jika suatu website tidak menyediakan satu hal menarik, tentu saja user akan meninggalkannya begitu saja.
Selain itu, user yang tidak sabar, secara tidak langsung juga turut memperbesar faktor kesulitan dalam pembuatan website-website baru. Tampaknya, aspek usability (kemudahan) mulai dilupakan oleh pembuatnya. Suatu website dapat dikatakan tidak efektif apabila para user-nya tidak dapat memanfaatkan fasilitas yang disediakannya dalam sekejap.
Seharusnya, apa yang ditemukan atau dilihat pengunjung pada sebuah website merupakan hasil dari suatu sistem terpadu yang dapat jalan bersamaan (concurrent engineering). Namun sayangnya, berhasil atau tidaknya suatu sistem terpadu tadi ditentukan juga oleh user melalui apa yang dilihat dan didengarnya, seperti gambar, simbol-simbol, lagu, atau suara hasil manipulasi software pada komputer tersebut.
Aspek-aspek yang harus teruji dalam suatu fungsi HCI (Human-Computer Interaction) antara lain:
- Aspek Fungsi (usefulness) adalah faktor-faktor yang berkaitan erat dengan pemrograman dan logic.
- Aspek Kemudahan (usability) adalah faktor-faktor yang berkaitan erat dengan user interface.
- Aspek Budaya (culture) adalah faktor-faktor yang berkaitan erat dengan antropologi.
Pengertian navigasi di sini adalah struktur menu dalam suatu website. Struktur menu perlu dipertimbangkan urutannya agar memudahkan user dalam menelusuri website tersebut. Posisi menu dan panjangnya menu juga menentukan kemudahan user dalam menggunakannya. Sebaiknya, menu yang berjajar ke bawah tidak sampai membuat user harus melakukan scroll (menggulung halaman ke bawah).
Resolusi layar
Hampir 60 persen user Internet menggunakan resolusi layar 1024x768 pixel, 24 persen menggunakan resolusi 1280x800 pixel, dan 8 persen masih menggunakan resolusi 800x600 pixel. Untuk itu, akan bijaksana apabila Anda membuat website dengan menentukan resolusi layar yang paling banyak digunakan, yaitu 1024x768 pixel. Untuk itu, Anda bisa menggunakan resolusi lebar layar 1024 pixel dengan bidang kerja website 960 pixel. Tentunya, hal ini sudah memperhitungkan tebal frame browser dan tebal scroll-bar.
Hampir 60 persen user Internet menggunakan resolusi layar 1024x768 pixel, 24 persen menggunakan resolusi 1280x800 pixel, dan 8 persen masih menggunakan resolusi 800x600 pixel. Untuk itu, akan bijaksana apabila Anda membuat website dengan menentukan resolusi layar yang paling banyak digunakan, yaitu 1024x768 pixel. Untuk itu, Anda bisa menggunakan resolusi lebar layar 1024 pixel dengan bidang kerja website 960 pixel. Tentunya, hal ini sudah memperhitungkan tebal frame browser dan tebal scroll-bar.
Gunakan Bread-Crumb
Penggunaan Bread-Crumb sebagai pelengkap navigasi sangat membantu user untuk mengetahui posisi halaman yang sedang dibuka. Penggunaan Bread-Crumb tersebut memungkinkan user dapat berpindah ke halaman sebelumnya tanpa harus kembali ke “home”.
Penggunaan Bread-Crumb sebagai pelengkap navigasi sangat membantu user untuk mengetahui posisi halaman yang sedang dibuka. Penggunaan Bread-Crumb tersebut memungkinkan user dapat berpindah ke halaman sebelumnya tanpa harus kembali ke “home”.
Site map
Site Map adalah satu halaman khusus yang isinya denah atau struktur menu di suatu website. Adanya site map ini akan membantu user mencari sesuatu dengan cepat. Sebaiknya, buatlah struktur site map yang mudah dimengerti oleh semua user.
Site Map adalah satu halaman khusus yang isinya denah atau struktur menu di suatu website. Adanya site map ini akan membantu user mencari sesuatu dengan cepat. Sebaiknya, buatlah struktur site map yang mudah dimengerti oleh semua user.
Fasilitas Search
Sertakan fasilitas "Search" sebagai alat bantu user dalam mencari sesuatu di website Anda. Akan lebih baik lagi apabila Anda bisa menyertakan "Advance Search" sehingga user bisa mencari informasi yang lebih spesifik lagi dalam website.
Lintas browser
Buatlah website yang dapat diakses oleh berbagai browser yang ada saat ini, seperti Internet Explorer (IE), FireFox, Opera, dan Safari. Hindari membuat suatu batasan dengan membuat website yang dapat dibuka dengan browser tertentu saja. Jika website yang Anda buat dapat dibuka dengan baik di berbagai browser, tentunya peluang untuk diakses user menjadi meningkat. 
Sering ditemukan kejadian user membuka suatu website dengan browser IE dan mendapatkan peringatan bahwa mereka harus menggunakan browser selain IE. Hal ini tentunya sangat tidak nyaman. Namun, akan lebih tidak bijaksana lagi jika tidak ada link lain untuk masuk ke dalam website tersebut. Hasilnya, tentu saja user tidak dapat memasuki website tersebut hanya karena menggunakan browser IE. Dengan demikian, website tersebut bisa dikatakan tidak usable.
Penggunaan CSS dan Script pada website terkadang terlihat berbeda di browser tertentu. Oleh karena itu, Anda perlu menggunakan standar penulisan CSS dan Script yang umum dan dapat diterima oleh berbagai browser. Selanjutnya, pembuat website wajib menguji website-nya terlebih dahulu di berbagai browser sebelum memperkenalkan dan membukanya untuk publik luas.
Mundur satu versi
Mengakomodasi perkembangan teknologi dengan menggunakan teknologi yang terbaru memang baik. Namun, tidak semua user memiliki kemampuan akses yang sama. Oleh karena itu, sebaiknya gunakan target browser satu angka di bawah yang paling baru saat ini. Misalnya, saat ini browser yang banyak digunakan adalah IE 7. Sebaiknya, Anda membuat website yang merujuk pada sistem pemrograman atau kode untuk versi 6. Begitu juga dengan animasi flash. Saat Anda melakukan Publish Movie, sebaiknya targetkan di versi yang sebelumnya. Misalnya, saat ini banyak website yang menggunakan dukungan Flash Player 9, sebaiknya Anda gunakan versi 7 atau 8.
Pemilihan warna
Penggunaan warna untuk background, teks, dan elemen grafis lainnya dapat mempengaruhi perilaku user dalam mengakses website Anda. Anda perlu menyadari bahwa tidak semua user dapat melihat warna sebaik yang Anda lihat. Di antara user mungkin ada yang mengalami buta warna atau kerusakan mata sehingga tidak dapat melihat perbedaan warna yang berdekatan.
Sebagai contoh, suatu halaman menggunakan warna background hitam, dengan teks berwarna abu-abu tua atau menggunakan warna background putih dengan teks berwarna abu-abu muda. Perpaduan warna seperti itu jelas akan sulit dilihat dan dibaca.
Hindari juga pemakaian warna teks biru, apalagi dengan garis bawah, jika itu bukan hyperlink. Mengapa? Teks tersebut akan membingungkan user. Hal ini karena teks biru dengan garis bawah umumnya digunakan sebagai teks yang merupakan hyperlink ke halaman atau website lain.
Banner iklan
Apabila website Anda menyediakan space untuk banner iklan, sebaiknya atur agar tidak terlihat mendominasi website Anda dibandingkan isi atau konten yang ada. Pertimbangkan juga apabila banner menggunakan animasi. Jika terdapat lebih dari lima banner animasi, tentu saja user bisa terganggu dalam membaca konten website.
Penggunaan teknologi flash untuk animasi banner membuat website Anda berat diakses oleh user, terlebih bila terdapat lebih dari dua animasi flash dalam satu halaman. Untuk user yang perangkat komputernya tidak terlalu canggih, CPU Resource akan tersita hampir 100 persen hanya untuk menjalankan animasi flash yang ada pada halaman website Anda. Akibatnya, user merasakan penurunan performa komputernya dan yang paling parah adalah hang.
Printable
Untuk memuaskan user, sebaiknya buatlah halaman website Anda agar mudah dicetak (Print). Banyak website yang menyediakan link khusus untuk keperluan print tersebut.
Halaman untuk keperluan print perlu perlakuan khusus, seperti penggunaan huruf berwarna hitam di atas background werwarna putih. Ukuran untuk lebar margin juga harus disesuaikan dengan standar kertas yang digunakan untuk mencetak.
Source: CHIP 07 2008
Author: Saftari Firmansyah
Sertakan fasilitas "Search" sebagai alat bantu user dalam mencari sesuatu di website Anda. Akan lebih baik lagi apabila Anda bisa menyertakan "Advance Search" sehingga user bisa mencari informasi yang lebih spesifik lagi dalam website.
Ukuran huruf (Font) yang tidak tetap
Penggunaan CSS pada website saat ini sering kali menetapkan ukuran huruf dengan satuan pixel. Dengan ukuran ini, user tidak bisa memperbesar atau memperkecil isi teks di dalam website dengan fasilitas standar (Change Font Size) yang ada di browser. Kemudian, sebagian besar website saat ini menggunakan huruf berukuran kecil (tiny). Bagi user berusia diatas 40 tahun, tentunya akan mengalami kesulitan membaca huruf sekecil itu. Oleh karena itu, sebaiknya Anda atur ukuran huruf minimal 10 point agar mudah dibaca oleh beragam user.
Penggunaan CSS pada website saat ini sering kali menetapkan ukuran huruf dengan satuan pixel. Dengan ukuran ini, user tidak bisa memperbesar atau memperkecil isi teks di dalam website dengan fasilitas standar (Change Font Size) yang ada di browser. Kemudian, sebagian besar website saat ini menggunakan huruf berukuran kecil (tiny). Bagi user berusia diatas 40 tahun, tentunya akan mengalami kesulitan membaca huruf sekecil itu. Oleh karena itu, sebaiknya Anda atur ukuran huruf minimal 10 point agar mudah dibaca oleh beragam user.
Link: Gunakan yang mudah dicerna oleh semua pengunjung website.
Link yang umum
Saat membuat hyperlink, sebaiknya gunakan yang umum dan mudah dicerna user. Misalnya, http://www.chip.co.id/aboutus/management. Penggunaan aplikasi CMS (Content Management System) untuk website terkadang memungkinkan Anda menggunakan kode unik (unique-code) dalam membuat suatu hyperlink, seperti
http://www.chip.co.id/?page=c803e15340c076c9e959211445717bbc. Sayangnya, penulisan link unik seperti ini tidak memberi kemudahan berarti bagi banyak user karena link seperti itu sulit untuk dicerna apalagi dihafal.
Flash
Teknologi animasi flash awalnya dibuat untuk menampilkan animasi yang hemat bandwidth. Teknologi flash ini sebenarnya menggantikan Animated-GIF dengan format vektor. Teknologi flash berkembang cukup pesat sehingga dapat menampilkan format video dalam animasi flash, koneksi ke database, dan bahkan aplikasi yang rumit. Namun, ada beberapa kekurangan yang ditemukan pada website yang menggunakan flash sebagai pengganti format HTML. Banyak hal-hal penting yang dilupakan, antara lain:
Saat membuat hyperlink, sebaiknya gunakan yang umum dan mudah dicerna user. Misalnya, http://www.chip.co.id/aboutus/management. Penggunaan aplikasi CMS (Content Management System) untuk website terkadang memungkinkan Anda menggunakan kode unik (unique-code) dalam membuat suatu hyperlink, seperti
http://www.chip.co.id/?page=c803e15340c076c9e959211445717bbc. Sayangnya, penulisan link unik seperti ini tidak memberi kemudahan berarti bagi banyak user karena link seperti itu sulit untuk dicerna apalagi dihafal.
Flash
Teknologi animasi flash awalnya dibuat untuk menampilkan animasi yang hemat bandwidth. Teknologi flash ini sebenarnya menggantikan Animated-GIF dengan format vektor. Teknologi flash berkembang cukup pesat sehingga dapat menampilkan format video dalam animasi flash, koneksi ke database, dan bahkan aplikasi yang rumit. Namun, ada beberapa kekurangan yang ditemukan pada website yang menggunakan flash sebagai pengganti format HTML. Banyak hal-hal penting yang dilupakan, antara lain:
- Tidak disertakan Bread-crumb.
- Tidak disertakan fungsi Back, sementara fungsi Back pada browser menjadi tidak dapat digunakan dengan semestinya.
- Animasi dan ukuran file terlalu besar meminta waktu untuk di download.
- Penggunaan script yang salah sehingga dapat menurunkan performa prosesor (CPU).
- Pemakaian tombol menu yang tidak standar sehingga membingungkan.
- Page tidak dapat dicetak (print).
- Tidak berfungsinya fungsi Search (F3) pada browser untuk mencari teks.
Lintas browser
Buatlah website yang dapat diakses oleh berbagai browser yang ada saat ini, seperti Internet Explorer (IE), FireFox, Opera, dan Safari. Hindari membuat suatu batasan dengan membuat website yang dapat dibuka dengan browser tertentu saja. Jika website yang Anda buat dapat dibuka dengan baik di berbagai browser, tentunya peluang untuk diakses user menjadi meningkat.
Pewarnaan: Warna background dan teks yang hampir sama bisa menyulitkan user melihatnya. Ingat! Tidak semua user memiliki kemampuan melihat yang sama.
Sering ditemukan kejadian user membuka suatu website dengan browser IE dan mendapatkan peringatan bahwa mereka harus menggunakan browser selain IE. Hal ini tentunya sangat tidak nyaman. Namun, akan lebih tidak bijaksana lagi jika tidak ada link lain untuk masuk ke dalam website tersebut. Hasilnya, tentu saja user tidak dapat memasuki website tersebut hanya karena menggunakan browser IE. Dengan demikian, website tersebut bisa dikatakan tidak usable.
Penggunaan CSS dan Script pada website terkadang terlihat berbeda di browser tertentu. Oleh karena itu, Anda perlu menggunakan standar penulisan CSS dan Script yang umum dan dapat diterima oleh berbagai browser. Selanjutnya, pembuat website wajib menguji website-nya terlebih dahulu di berbagai browser sebelum memperkenalkan dan membukanya untuk publik luas.
Mundur satu versi
Mengakomodasi perkembangan teknologi dengan menggunakan teknologi yang terbaru memang baik. Namun, tidak semua user memiliki kemampuan akses yang sama. Oleh karena itu, sebaiknya gunakan target browser satu angka di bawah yang paling baru saat ini. Misalnya, saat ini browser yang banyak digunakan adalah IE 7. Sebaiknya, Anda membuat website yang merujuk pada sistem pemrograman atau kode untuk versi 6. Begitu juga dengan animasi flash. Saat Anda melakukan Publish Movie, sebaiknya targetkan di versi yang sebelumnya. Misalnya, saat ini banyak website yang menggunakan dukungan Flash Player 9, sebaiknya Anda gunakan versi 7 atau 8.
Pemilihan warna
Penggunaan warna untuk background, teks, dan elemen grafis lainnya dapat mempengaruhi perilaku user dalam mengakses website Anda. Anda perlu menyadari bahwa tidak semua user dapat melihat warna sebaik yang Anda lihat. Di antara user mungkin ada yang mengalami buta warna atau kerusakan mata sehingga tidak dapat melihat perbedaan warna yang berdekatan.
Sebagai contoh, suatu halaman menggunakan warna background hitam, dengan teks berwarna abu-abu tua atau menggunakan warna background putih dengan teks berwarna abu-abu muda. Perpaduan warna seperti itu jelas akan sulit dilihat dan dibaca.
Hindari juga pemakaian warna teks biru, apalagi dengan garis bawah, jika itu bukan hyperlink. Mengapa? Teks tersebut akan membingungkan user. Hal ini karena teks biru dengan garis bawah umumnya digunakan sebagai teks yang merupakan hyperlink ke halaman atau website lain.
GUI yang tidak standar
GUI (Graphic User Interface) adalah simbol-simbol yang mewakili suatu fungsi. Sebagai contoh tombol "Back", "Forward", "Stop", "Refresh", "Scroll-up", "Scroll-down", dan "Scroll-bar".
Terkadang, Anda menemukan suatu website yang menghilangkan fungsi-fungsi GUI pada browser (frameless), tetapi tidak menyertakan kembali di dalam halaman yang dibuatnya. Hal ini dapat membuat user kehilangan orientasi saat berada di website tersebut.
GUI (Graphic User Interface) adalah simbol-simbol yang mewakili suatu fungsi. Sebagai contoh tombol "Back", "Forward", "Stop", "Refresh", "Scroll-up", "Scroll-down", dan "Scroll-bar".
Terkadang, Anda menemukan suatu website yang menghilangkan fungsi-fungsi GUI pada browser (frameless), tetapi tidak menyertakan kembali di dalam halaman yang dibuatnya. Hal ini dapat membuat user kehilangan orientasi saat berada di website tersebut.
Banner iklan: Terlalu banyak iklan berformat flash bisa membuat website sulit diakses oleh user.
Apabila website Anda menyediakan space untuk banner iklan, sebaiknya atur agar tidak terlihat mendominasi website Anda dibandingkan isi atau konten yang ada. Pertimbangkan juga apabila banner menggunakan animasi. Jika terdapat lebih dari lima banner animasi, tentu saja user bisa terganggu dalam membaca konten website.
Penggunaan teknologi flash untuk animasi banner membuat website Anda berat diakses oleh user, terlebih bila terdapat lebih dari dua animasi flash dalam satu halaman. Untuk user yang perangkat komputernya tidak terlalu canggih, CPU Resource akan tersita hampir 100 persen hanya untuk menjalankan animasi flash yang ada pada halaman website Anda. Akibatnya, user merasakan penurunan performa komputernya dan yang paling parah adalah hang.
Printable
Untuk memuaskan user, sebaiknya buatlah halaman website Anda agar mudah dicetak (Print). Banyak website yang menyediakan link khusus untuk keperluan print tersebut.
Halaman untuk keperluan print perlu perlakuan khusus, seperti penggunaan huruf berwarna hitam di atas background werwarna putih. Ukuran untuk lebar margin juga harus disesuaikan dengan standar kertas yang digunakan untuk mencetak.
Source: CHIP 07 2008
Author: Saftari Firmansyah
