Pertemuan 7 Web USability

Interaksi Manusia dan Komputer
WEB USABILITY
TUJUAN
– mengetahui aspek-aspek Web usability berkaitan
dengan desain dan penyajian isi kepada user serta
kegunaan dan aksesbilitas dari informasi yang
disajikan pada sebuah situs Web
– mampu merancang sebuah desain situs Web
dengan memperhatikan aspek-aspek Web
usability
PENDAHULUAN
– web usability berkaitan dengan desain dan
penyajian isi kepada user serta memastikan
kegunaan dan aksesbilitas dari informasi
– aspek web usability meliputi
• spesifikasi fungsional
– memahami fungsional dari situs web
• desain isi
– kualitas dan struktur informasi
• desain visual
– layout halaman web secara individu & penyajiannya
ASPEK USABILITY :
Spesifikasi Fungsional
– definisikan situs web dengan jelas dari sisi
• apakah tujuan utama situs tersebut?
– menyediakan hiburan atau teknologi
– memberikan pelayanan sebagai sumber berita atau referensi
bagi organisasi
– memberikan pelayanan sebagai media iklan atau alat
pemasaran secara visual
– menyediakan dukungan yang bisa dipercaya kepada pelanggan
ASPEK USABILITY :
Spesifikasi Fungsional
– definisikan situs web dengan jelas dari sisi
• mengapa situs tersebut dibutuhkan?
– sangat dibutuhkan sebagai salah satu sarana persaingan
– sebagai saluran informasi khususnya bagi intranet
• untuk siapa situs ditujukan?
– pengguna yang diharapkan
ASPEK USABILITY :
Spesifikasi Fungsional
– menganalisa kelayakan dari penyelesaian/solusi
• mungkin tidak tepat atau tidak praktis untuk
menyediakan solusi bagi aspek tertentu dari definisi
permasalahan
– solusi masalah e-commerce untuk meningkatkan penjualan
membutuhkan pertimbangan masalah
» perijinan pengiriman pesanan antar negara
» pajak
» bahasa
» nilai tukar mata uang, dll
ASPEK USABILITY :
Spesifikasi Fungsional
– menganalisa kelayakan dari penyelesaian/solusi
• alasan-alasan yang mungkin untuk tidak memasukkan
suatu fitur
– tidak diperlukan dalam relasi dengan tujuan situs secara
keseluruhan
– secara teknis tidak layak menyoroti yang lain
– secara ekonomis tidak praktis
– harus secara signifikan meningkatkan project time-line
– meskipun fitur tersebut diinginkan tetapi implementasinya
membuat arti lebih dalam iterasi berikutnya
ASPEK USABILITY :
Spesifikasi Fungsional
– putuskan apa yang harus dikerjakan dan apa yang
tidak boleh dikerjakan oleh situs dan bagaimana
hal itu harus dikerjakan berdasarkan kelayakan
dari solusi
ASPEK USABILITY :
Desain Isi
– desain informasi
• penstrukturan informasi dan navigasi melalui ruang
dokumen
• desain informasi yang tepat adalah kunci dalam
pengembangan situs web yang sukses
• jika situs memiliki isi dan antarmuka baik tetapi miskin
asitektur informasi, maka situs relatif tidak berguna
• jika pengguna tidak dapat secara mudah menemukan
informasi, maka situs akan kehilangan efektifitasnya
ASPEK USABILITY :
Desain Isi
– model organisasi isi
• linier murni
– organisasi berurutan menyediakan perlakuan yang bisa
diperkirakan
» slide show
ASPEK USABILITY :
Desain Isi
– model organisasi isi
• linier dengan alternatif
– mensimulasikan sifat interaktif
» situs web quiz yang menampilkan jawaban ya atau tidak
ke pemakai
ASPEK USABILITY :
Desain Isi
– model organisasi isi
• hirarki campuran
– gabungan dari hiraki terbatas dan lebar
» situs web dengan pilihan utama dan secara simultan
menyediakan kemampuan untuk melompat ke bagian
terdalam dari situs
ASPEK USABILITY :
Desain Isi
– model organisasi isi
• web murni
– memiliki struktur yang tidak terlihat
– dapat menjadi sulit untuk digunakan
– menyediakan perlakuan yang luas akan ekspresifitas
ASPEK USABILITY :
Desain Isi
• Desain Isi
– berguna untuk memahami bagaimana informasi
dikonsumsi pada layar atau tercetak
– ekspresifitas vs mudah diprediksi
– selama model linier mudah diprediksi maka akan
menyediakan pandangan relasional yang terbatas
ASPEK USABILITY :
Desain Isi
• Desain Isi
ASPEK USABILITY :
Desain Isi
• Desain Isi
– penentuan struktur yang tepat
• struktur sebaiknya direncanakan dengan sesuai dan
didokumentasikan dalam bentuk flowchart
ASPEK USABILITY :
Desain Isi
• Desain Isi
– site map/peta situs
• mendedikasikan keseluruhan halaman ke visualisasi
arsitektur informasi
• tujuannya untuk membantu pengguna memahami
struktur dan organisasi situs web
• hanya lebih sedikit daripada setengah dari seluruh situs
web yang dimiliki sekarang
ASPEK USABILITY :
Desain Isi
• Desain Isi
– site map/peta situs
• permasalahan desain
– “a map should be a map, not a navigational challenge of its
own.” (Jakob Nielsen)
– sederhana dan statis
– layout rapi dan menunjukkan link
– menampilkan segala sesuatu dalam satu pandangan (tidak
lebih dari dua setengah kali ukuran window)
– lebih kalem dari homepage yang ramai
ASPEK USABILITY :
Desain Isi
• Desain Isi
– site map/peta situs
ASPEK USABILITY :
Desain Isi
• Desain Visual
– aturan dasar
•
•
•
•
sederhana
isi 50 % atau lebih (disarankan 80%)
navigasi kurang dari 20 %
gunakan white space dengan hemat untuk membantu
pengguna memahami pengelompokan informasi
ASPEK USABILITY :
Desain Visual
• Desain Visual
– kemudahan untuk dibaca
• gunakan warna dengan kontras tinggi diantara teks dan
latar belakang
– contoh kontras rendah : pepsi
• gunakan salah satu latar belakang dengan warna jelas
atau pattern latar belakang yang halus
– contoh latar belakang jelek : pepsi
• buatlah teks tetap tenang ’tenang’
• hampir semua teks sebaiknya diatur untuk rata kiri
ASPEK USABILITY :
Desain Visual
• Desain Visual
– navigasi
• tempatkan menu atau link yang berhubungan di bagian
atas halaman
– agar tetap terlihat meski download tidak lengkap
• beri warna pada link
• gunakan kode warna yang sama untuk seluruh situs
– mengijinkan pengguna untuk melihat dengan jelas bagian
situs mana yang dikunjungi dan sisa yang akan dijelajahi
ASPEK USABILITY :
Desain Visual
• Desain Visual
– cross-platform design
• desain untuk kebebasan berpindah
– letakkan menu di setiap halaman untuk menyediakan konteks
dan navigasi bagi pengguna yang ingin menuju langsung ke
halaman internal
– fasilitas kembali ke home dan ke atas
• desain halaman tunggal yang bekerja dengan seluruh
peralatan display yang berbeda
ASPEK USABILITY :
Desain Visual
• Desain Visual
– cross-platform design
• jika tidak
– tentukan halaman yang memungkinkan browser untuk
mengoptimalkan display bagi masing-masing keadaan
pengguna
– pisahkan arti dan penyajian
– gunakan style sheet untuk menspesifikasikan penyajian
ASPEK USABILITY :
Desain Visual
• Desain Visual
– pelajarilah dengan cermat pengaruh yang kuat
dari teknologi web baru pada user sebelum
menggunakan
• versi baru html, plug-ins, format data baru, fitur
browser spesifik
– berikan pilihan kepada pengguna untuk memilih
versi biasa atau frame
– berikan pilihan kepada pengguna untuk memilih
versi antarmuka grafis atau tektual
ASPEK USABILITY :
Desain Visual
• Desain Visual
– desain yang independent terhadap resolusi
– sediakan versi cetak secara terpisah untuk setiap
dokumen yang panjang
– usahakan proses download dan koneksi cepat
• gunakan gambar yang interlaced
• pecah ukuran gambar menjadi potongan-potongan
yang lebih kecil
• jangan terlalu banyak menggunakan elemen
multimedia
ASPEK USABILITY :
Desain Visual
• Good Design
ASPEK USABILITY :
Desain Visual
• Good Design
ASPEK USABILITY :
Desain Visual
• Bad Design
• Bad Design
Good or Bad Design
TERIMA KASIH