Usability: Disain Web yang Brilian

Presentasi berjudul: "Usability: Disain Web yang Brilian"— Transcript presentasi:

1 Usability: Disain Web yang Brilian
I Wayan Ordiyasa, S.Kom, M.T.

2 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

3 Lima Syarat Web untuk mencapai Usability
Mudah untuk dipelajari Efisien dalam Penggunaan Mudah untuk diingat Tingkat kesalahan rendah Kepuasan Pengguna

4 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.

5 Tip Usability: Navigasi Link Warna Buta Grafik Konsistensi

6 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

7 Tip untuk membuat Link Standar
Gunakan garis bawah untuk mendisain sebuah Link, jangan sekali-kali 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

8 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)

9 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

10 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.

11 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.

12 MENGGABUNGKAN DISAIN DENGAN PEMROGRAMAN WEB
I WAYAN ORDIYASA, S.KOM, M.T.

13 Langkah-langkah menggabungkan Disain dengan Pemrograman
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

14 Langkah-langkah menggabungkan Disain dengan Pemrograman (Lanjutan)
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 Mempersiapkan Bagian Content/Body Membuat Area untuk Bagian Content Memasang Label Selamat Datang Memasang Script Berita Terbaru

15 Langkah-langkah menggabungkan Disain dengan Pemrograman (Lanjutan)
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 Menghias disain dengan CCS(Cascading Style Sheet) Memodifikasi Link Standar Memodifikasi Scrollbar

16 Langkah-langkah menggabungkan Disain dengan Pemrograman (Lanjutan)
Mengubah Bentuk Tombol Form Mengaktifkan Tombol Navigasi Menambah Meta Tag Menguji Hasil Penggabungan Disain Web

17 THE END