Interaksi Manusia dan Komputer WEB USABILITY TUJUAN mengetahui
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
- Slides: 32