Usability: Disain Web yang Brilian

Usability:
Disain Web yang Brilian
I Wayan Ordiyasa, S.Kom, M.T.
Pengertian Usability:
 Suatu
pengalaman pengguna dalam
berinteraksi dengan aplikasi atau situs
web sampai pengguna dapat
mengoperasikannya dengan mudah dan
cepat.
 Usability ditemukan oleh : Jakob Neilsen
 Dalam Disain Web, usability lebih
mengacu pada disain web itu sendiri
Lima Syarat Web untuk mencapai
Usability
1.
2.
3.
4.
5.
Mudah untuk dipelajari
Efisien dalam Penggunaan
Mudah untuk diingat
Tingkat kesalahan rendah
Kepuasan Pengguna
Situs yang didisain dengan jelek
dapat mengakibatkan:

Frustrasi, karena pengunjung menunggu terlalu
lama akses sebuah situs
 Bingung, karena pengunjung hanya bisa
menebak dimana mereka berada dan mau
kemana, disebabkan sistem navigasi yang rumit
 Kabur atau pergi dan memilih situs yang lain
 Parahnya lagi, jika mereka memberitahukan
kepada orang lain bahwa betapa jeleknya situs
kita.
Tip Usability:
 Navigasi
 Link
 Warna
Buta
 Grafik
 Konsistensi
Tip Navigasi yang baik:


Buatlah Navigasi yang jelas dan ringkas
Umumnya Navigasi diletakkan di sebelah kiri
atau di atas dari halaman web
 Navigasi bisa berbentuk teks atau grafik, Bila
berbentuk Grafik sertakan teks pada grafik
tersebut
 Hindari Pemakaian Frame untuk Navigasi,
karena kebanyakan menimbulkan link yang tidak
berfungsi dan membuat disain terlihat statis.
 Jaga Konsistensi. Letakkan pada tempat yang
sama pada tiap halaman
Tip untuk membuat Link Standar




Gunakan garis bawah untuk mendisain sebuah Link, jangan sekalikali menggarisbawahi teks yang bukan link, krena pengunjung akan
mengaggapnya sebagai link.
Umumnya Link yang belum pernah dikunjungi atau belum pernah
diklik berwarna biru, sedangkan link yang sudah dikunjungi
berwarna merah atau ungu.
Jangan sampai link tidak berfungsi (broken link). Apabila di
dalamnya belum ada isinya sebaiknya jangan dicantumkan.
Gunakan Breadcrumb untuk mempermudah pengunjung untuk
menjelajahi situs dengan cepat
Contoh: Home > Konsultasi > Keluarga > Pertanyaan1
Disini pengunjung tahu dimana bereka berada (Pertanyaan 1),
sehingga untuk kembali lebih mudah
Tip untuk menghindari Warna Buta

Kebanyakan orang tidak bisa membedakan
antara bayangan warna merah dan bayangan
warna hijau.
 Hindari menggunakan hanya satu warna merah
dan warna hijau saja dalam disain
 Jangan menggunakan warna sebagai penunjuk.
Gunakan penunjuk lain yang lebih dimengerti,
misalnya dalam navigasi gunakan panah untuk
menghantarkan pengunjung ke halaman
selanjutnya.
 Buatlah kontras yang tinggi antara teks dengan
latar belakangnya (background)
Tip untuk mempercepat akses
Grafik dalam sebuah situs Web



Gunakan Grafik dengan hemat secukupnya
Jaga ukuran grafik agar berukuran kecil.
Gunakan Gambar dalam format GIF, karena
format ini didukung oleh semua browser
 Gunakan atribut border=0 pada img scr karena
beberapa browser akan menampilkan warna
border biru disekeliling gambar apabila dipakai
sebagai link.
 Gunakan atribut alt dalam tag img scr karena
tidak semua pengunjung memiliki browser yang
dapat menampilkan grafik
Beberapa Tip Situs terlihat
Sederhana








Gunakan Sub judul untuk memisahkan bagian Teks
Gunakan Ruang Kosong secukupnya. Salahsatunya adalah dengan
membatasi bahwa dalam satu bari tidak lebih dari 12 Kalimat
Tulis isi dengan ringkas dan singkat, jangan berbentuk seperti
karangan yang bertele-tele.
Berikan tanda terang pada kalimat yang dianggap penting dan
memerlukan perhatian yang lebih.
Gunakan background yang terang dengan teks yang gelap.
Gunakan background yang gelap dengan teks yang terang.
Hindari warna yang tidak serasi
Jangan membuat situs yang bergantung pada teknologi baru.
Beberapa Hal yang Membuat
Konsistensi pada Situs

Pastikan untuk menjaga letak elemen disain berada di
berda di lokasi yang sama (konsisten) pada tiap
halaman, misalnya navigasi, logo, judul dan lain
sebagainya.
 Kebanyakan situs meletakkan logonya di ujung atas
sebelah kiri halaman.
 Warna link yang belum dikunjungi (diklik) berwarna biru
dan link yang sudah dikunjungi berwarna merah atau
ungu
 Pergunakan Jenis Huruf yang standar
 Link harus memiliki garis bawah dan memiliki warna
yang sama
 Jangan memakai terlalu banyak warna yang berbeda,
selain terlihat Norak juga membuat mata alergi.
MENGGABUNGKAN DISAIN
DENGAN PEMROGRAMAN
WEB
I WAYAN ORDIYASA, S.KOM, M.T.
Langkah-langkah menggabungkan
Disain dengan Pemrograman
1.
2.
3.
4.
5.
Tentukan terlebih dahulu model/layout
yang akan digunakan apakah
menggunakan model split atau tidak
Mengatur Tempat Penyimpanan File
Mengorganisasikan File Web ke Situs
Lokal
Mempersiapkan halaman Web
Membuat Tabel Induk
Langkah-langkah menggabungkan
Disain dengan Pemrograman
(Lanjutan)
6.
7.
Mempersiapkan bagian Header
Mempersiapkan Menu bagian Kiri
Menambah area untuk menu bagian kiri
Memasang Label Menu Kata Gori
Memasang Script tampilan Katagori
Memasang Script Counter
Memasang Banner
8.
Mempersiapkan Bagian Content/Body
Membuat Area untuk Bagian Content
Memasang Label Selamat Datang
Memasang Script Berita Terbaru
Langkah-langkah menggabungkan
Disain dengan Pemrograman
(Lanjutan)
9.
Menu Bagian Kanan
Membuat area untuk Menu Bagian Kanan
Memasang Label Menu Login
Memasang Script Login
Memasang Label Menu Pencarian
Memasang Script Pencarian Berita
Memasang Label Menu Artikel sebelumnya
Bagian Footer
11. Menghias disain dengan CCS(Cascading Style
Sheet)
10.
Memodifikasi Link Standar
Memodifikasi Scrollbar
Langkah-langkah menggabungkan
Disain dengan Pemrograman
(Lanjutan)
12.
13.
14.
15.
Mengubah Bentuk Tombol Form
Mengaktifkan Tombol Navigasi
Menambah Meta Tag
Menguji Hasil Penggabungan Disain
Web