Prof. Dr. Ema Utami, S.Si, M.Kom
S2 Teknik Informatika Universitas AMIKOM Yogyakarta Tahun Akademik 2016/2017 Semester Genap
Jenis program aplikasi 1. Special purpose software 2. General purpose software
Pendekatan yang digunakan 1. User-centered design approach perancang & user bersama-sama membuat tampilan antarmuka
2. User design approach hanya user yang membuat tampilan antarmuka
Pengertian Dialog secara Umum Berbicara, bercakap-cakap, bertukar pikiran & gagasan bersama
Pengertian Dialog Menurut IMK pertukaran instruksi & informasi antara user & sistem komputer
Urutan perancangan (Roger Pressman) Analisa user, tugas dan lingkungan Desain antara muka (interface design) Implementasi antar muka (interface construction) Evaluasi & Validation (interface validation)
User-centered design approach
Analis
Analisa User,tugas & Lingkungan. Konsep UI
UI Artist Membuat & Memperbaiki UI
Requirement / Kebutuhan
Pendapat, Kritik & Saran
Klien
UI
Urutan Perancangan Antarmuka 1. 2. 3. 4. 5.
Pemilihan ragam dialog Perancangan struktur dialog Perancangan format pesan Perancangan penanganan kesalahan Perancangan struktur data
Ragam Dialog pengorganisasian berbagai teknik dialog interaktif yang memungkinkan terjadinya komunikasi antara manusia dengan komputer 1. 2. 3. 4.
Antarmuka command line Antarmuka berbasis menu Antarmuka berbasis borang isian Antarmuka berbasis icon
Antarmuka command line mengekspersikan instruksi ke komputer secara langsung dengan menggunakan kunci fungsi, singkatan pendek, karakter tunggal, dll. Command Language sesuai untuk user mahir
Antarmuka Berbasis Menu Diperlukan pada program aplikasi yang mempunyai cukup banyak kemampuan dan fasilitas Sistem Menu Datar
Sistem Menu Tarik Jika fasilitas yang tersedia cukup banyak maka penampilan daftar menu menggunakan menu tarik (pulldown menu /pop-up menu).
Antarmuka Berbasis Pengisian Borang (Form Filling) • Terutama digunakan untuk aktivitas pemasukan data /pemanggilan data. • Layout layar tampilan mirip dengan form tercetak
Yang perlu diperhatikan: 1. Proteksi tampilan 2. Format & panjang isian 3. Isian dapat berupa pilihan 4. Petunjuk pengisian 5. Isian dapat bersifat opsional 6. Isian dapat bernilai default 7. Fasilitas bantuan 8. Navigasi 9. Pembetulan kesalahan isian 10. Penyelesaian isian
Antarmuka Berbasis Icon Ragam dialog yang banyak menggunakan simbol-simbol dan tanda-tanda untuk menunjukkan suatu aktifitas tertentu
Antarmuka Berbasis Icon vs Antarmuka Berbasis Menu Perbedaannya terletak pada cara penyajian pilihan: a. Pada sistem menu, pilihan aktifitas dinyatakan secara tekstual, b. Pada sistem icon, pilihan aktifitas dinyatakan dengan suatu tanda / simbol yang disebut pictogram (icon)
Faktor penentu arti suatu icon 1). Konteks dalam situasi di mana icon digunakan misal: di mall, bandara, rumah sakit, restoran, dll 2). Tugas apa yang diemban misal: sebagai tanda peringatan, petunjuk, dll.
3). Bentuk representasinya a). Icon Kemiripan (Resemblance icons) Menggambarkan analogi dari dunia nyata b). Icon Contoh (Exemplar icons) Perwakilan dari benda yang sebenarnya ada c). Icon Simbol (Symbolic icons) Menggambarkan secara abstrak konsep yang ada di belakang gambar itu
d). Icon Sembarang (Arbitrary icons) Tidak jelas, tidak menggambarkan secara sekilas hubungan langsung dengan yang diwakili
Prinsip Perancangan (Theo Mandel) Tempatkan user sebagai kontrol
Mudahkan user untuk mengingat
Konsistensi antar muka
Prinsip Perancangan (Ian Sommervile) Kebiasaan user Konsistensi Minimalisasi kejutan
Kemampuan pemulihan Petunjuk penggunaan Perbedaan pengguna
Aturan dalam Perancangan Dialog 1. 2. 3. 4. 5. 6. 7.
Pegang teguh konsistensi Sediakan shortcut bagi pengguna aktif Sediakan feedback yang informatif Sediakan error handling yang mudah Ijinkan pembatalan aksi Sediakan fasilitas bantuan (help) Kurangi beban ingatan jangka pendek
Memfokuskan Perhatian Peletakan menu Flashing Pewarnaan Batasi jumlah warna yang digunakan Gunakan perubahan warna untuk menunjukkan perubahan status sistem
Gunakan warna yang unik Gunakan warna dengan hati – hati dan konsisten Berhati – hatilah dalam membuat pasangan warna
User Friendly
Kesesuaian dengan user Kesesuaian dengan tugas Mudah dipelajari/diingat
Mudah digunakan
Contoh pengetahuan yang diharapkan dapat diperoleh pada web e-commerce
Tugas Analisa Kajian Human Computer Interaction 1. 2. 3. 4. 5. 6. 7.
Akseslah 2 aplikasi dengan tema yang relevan dengan tema kelompok Saudara Bandingkanlah dengan desain antarmuka yang kelompok Saudara buat Uraikan dan berikan contoh ragam dialog apa saja yang digunakan Buatlah kajian tentang fitur-fitur yang tersedia (kurang, memadai, berlimpah) Uraikan informasi/pengetahuan apa saja yang dapat diperoleh oleh setiap user Buatlah kajian tentang tingkat user friendly (kelebihan & kelemahan) Buatlah kajian tentang tingkat memfokuskan perhatian (kelebihan & kelemahan)
