design interface

Download DESIGN INTERFACE

Post on 22-Feb-2016

78 views

Category:

Documents

0 download

Embed Size (px)

DESCRIPTION

DESIGN INTERFACE. Pendahuluan. Interaksi Manusia dan Komputer. Antarmuka pengguna ( User Interface ) : bagian sistem komputer yang memungkinkan manusia berinteraksi dengan komputer. Perancangan antarmuka : proses penggambaran bagaimana sebuah bagian sistem dibentuk. . - PowerPoint PPT Presentation

TRANSCRIPT

PERANCANGAN ANTARMUKA

DESIGN INTERFACEPendahuluanAntarmuka pengguna (User Interface) : bagian sistem komputer yang memungkinkan manusia berinteraksi dengan komputer.Perancangan antarmuka : proses penggambaran bagaimana sebuah bagian sistem dibentuk.

Interaksi Manusia dan KomputerPrinsip User Interface (1)Dalam perancangan antarmuka, ada beberapa prinsip yang harus diperhatikan (Deborah, 1992) :Kompatibilitas PenggunaKompatibilitas ProdukKompatibilitas Transisi Antar TugasKonsistensiKebiasaanKesederhanaanManipulasi Langsung

Prinsip User Interface (2)KontrolEfektivitas (tepat dalam penggunaan)Efisien dalam penggunaanKeamanan dalam penggunaanKesesuaian FungsiMudah dipelajariMudah diingat1. Kompatibilitas Pengguna

2. Kompatibilitas ProdukMemungkinkan adanya perubahan antarmuka agar sistem menjadi lebih kompatibel bagi pengguna.3. Kompatibilitas Transisi Antar TugasSistem harus dapat digunakan untuk memudahkan pengguna dalam melakukan tugasnya fungsi-fungsi dalam antarmuka disesuaikan dengan kebutuhan pengguna.4. KonsistensiMembantu pengguna untuk dapat menganalogikan dan memprediksi sesuatu yang sebelumnya belum pernah dilakukan.5. KebiasaanKonsep, terminologi, dan pengaturan antarmuka harus yang dapat dipahami oleh pengguna dengan baik agar pengguna tidak bingung saat berinteraksi.6. KesederhanaanMerancang antarmuka dengan bentuk yang sederhana, tanpa mengurangi fungsionalitas dari sistem/produk yang dibangun.7. Manipulasi Langsung (1)Merupakan gaya/ragam dialog dimana aksi yang dilakukan pengguna dapat langsung terlihat pada tampilan objek yang tampak pada layar monitor.Manipulasi langsung biasanya menyertakan alat penunjuk, seperti : mouse, trackball, layar sentuh, dan menggunakan grafik dalam menampilkan objek dan aksinya.Contoh penerapan manipulasi langsung : - Pada games cth : Solitaire- Pada program spreadsheet cth : Ms.Excel7. Manipulasi Langsung (2)Karakteristik yang harus diperhatikan dalam manipulasi langsung adalah : Bahwa meskipun pada layar tampilan banyak sekali objek yg dapat dioperasikan, tapi pada satu saat pengguna hanya berkuasa penuh pada sebuah objek yang ada disana.Manipulasi langsung jg dpt diterapkan pada bidang yg lebih luas dan serius :- Kontrol proses industri pembangkitan dan penyaluran listrik dan industri makanan berskala besar.- Editor Teks konsep WYSIWYG (what you see is what you get)- Simulator simulator penerbangan

8. KontrolSistem selalu dibawah kontrol penggunaAntarmuka harus mempunyai sarana yang memungkinkan pengguna untuk dapat menentukan :- dimana sebelumnya pengguna berada- dimana pengguna berada sekarang- kemana pengguna dapat pergi- apakah pekerjaan yg sudah dilakukan dapat dibatalkan.9. Efektivitas (Tepat dalam Penggunaan)

Apakah sistem yang dibangun dapat membuat pengguna:- mudah untuk mempelajarinya - efisien dalam melakukan pekerjaan- dapat mengakses informasi yang diperlukan, dsb.10. Efisien Dalam PenggunaanApakah sistem menyediakan fasilitas yang memudahkan pengguna dalam mengerjakan tugasnya.11. Keamanan Dalam PenggunaanUntuk melindungi pengguna dalam menghadapi kondisi yang tidak diinginkan.Salahsatu cara pengamanan, dengan membuat pesan dari aktivitas yang dilakukan pengguna.

12. Kesesuaian FungsiFungsi-fungsi yang disediakan sistem harus sesuai dengan definisi sistem tersebut.Contoh :- Aplikasi pengolah kata, brarti aplikasi tersebut harus menyediakan seluruh fasilitas yang dibutuhkan dalam pengolahan kata, seperti pembuatan dokumen baru, sampai ke penyimpanan dokumen, dll.13. Mudah Dalam MempelajariSistem yang mudah digunakan adalah sistem yang mudah dipelajari dan mudah diingat.Perancang harus mengetahui karakteristik pengguna, termasuk kemampuan dan keahlian pengguna sistem yang akan dibangun.14. Mudah DiingatMudah diingat bagaimana cara menggunakannya, sehingga perancang juga perlu memperhatikan bagaimana desain/rancangan sistem yang akan dibangun agar mudah dipelajari oleh pengguna, sehingga menjadi mudah diingat.Hal-hal Yang Harus Diperhatikan Dalam Merancang AntarmukaApa keinginan dan harapan orang?Apa batasan dan kemampuan fisiknya?Bagaimana sistem penerimaan dan pemrosesan informasi mereka bekerja?Apa yang dianggap menarik dan menyenangkan?Bagimana karakteristik dan batasan teknik dari hardware dan software komputernya?Dokumentasi RancanganMembuat sketsa pada kertasMenggunakan peranti prototipe GUIMenulis tekstual yang menjelaskan tentang kaitan antara satu jendela dengan jendela yang lainMenggunakan peranti bantu yg disebut CASE (Computer-Aided Software Engineering).Kategori Program AplikasiProgram aplikasi untuk keperluan khusus (special purpose software)- pengguna yang akan memanfaatkan aplikasi tersebut dapat diperkirakan, sehingga memudahkan dalam merancang antarmuka.Program aplikasi yang akan digunakan untuk banyak pengguna (general purpose software) atau public software.- penggunanya mempunyai tingkat kepandaian dan karakteristik beragam, sehingga perlu adanya customization agar pengguna dapat menggunakan aplikasi sesuai dengan selera masing-masing.Cara Pendekatan (1)User-Centered Design Approach- digunakan pada program aplikasi untuk keperluan khusus.- perancangan antarmuka melibatkan pengguna pengguna aktif berpendapat ketika perancang sedang membuat antarmuka pengguna seolah-olah sudah mempunyai gambaran nyata tentang antarmuka sistem yang akan mereka gunakan.Cara Pendekatan (2)User Design Approach- pengguna sendiri yang merancang antarmuka yang diinginkan.Komponen Antarmuka PenggunaModel pengguna; memungkinkan user untuk mengembangkan pemahaman yang mendasar tentang apa yang dikerjakan oleh program, bahkan oleh user yang sama sekali tidak mengetahui teknologi komputerBahasa perintah; sedapat mungkin menggunakan bahasa alamiUmpanbalik; kemampuan sebuah program yang membantu user untuk mengoperasikan program itu sendiriTampilan informasi; digunakan untuk menunjukkan status informasi atau program ketika user melakukan suatu tindakanUrutan Perancangan Dialog (1)Pemilihan ragam dialog, dipengaruhi oleh karakteristik populasi pengguna, tipe dialog yang diperlukan, dan kendala teknologi yang ada untuk mengimplementasikan ragam dialog tersebut.Perancangan struktur dialog; melakukan analisis tugas dan menentukan model pengguna dari tugas tersebutPerancangan format pesan; tata letak tampilan, keterangan tektual secara terinci, dan efisiensi inputing data harus mendapat perhatian lebihUrutan Perancangan Dialog (2)Perancangan penanganan kesalahan; untuk menghindari adanya kesalahan yang timbul, maka adanya kondisi yang disebut abnormal termination, yaitu eksekusi program berhenti karena terjadi kesalahan. Bentuk penanganan kesalahan :Validasi pemasukan data Proteksi pengguna Pemulihan dari kesalahanPenampilan pesan salah yang tepat dan sesuai dengan kesalahan yangterjadi pada waktu itu.

Urutan Perancangan Dialog (3)5. Perancangan struktur dataSetelah semua aspek antarmua dipertimbangkan, anda harus menentukan struktur data yang dapat digunakan untuk menyajikan dan mendukung fungsional komponen-komponen antarmuka yang diperlukan. Struktur data ini harus dipetakan langsung ke dalam model pengguna yang telah dibuat.Hal ini perlu ditekankan agar keinginan pengguna dan model sistem yang telah dirancang saling mempunyai kecocokan satu sama lain.

6 Faktor Agar Tata Letak TampilanUrutan PenyajianKelonggaran (Spaciousness)PengelompokanRelevansiKonsistensiKesederhanaan

PERANCANGAN TAMPILAN BERBASIS TEKSUrutan PenyajianUrutan penyajian disesuaikan dengan model pengguna yang telah disusun.Harus ada kesepakatan antara perancang dengan calon pengguna tentang urutan tampilan yang akan digunakan.Kelonggaran (Spaciousness)Penggunaan tabulasi dan spasi dapat memudahkan pengguna untuk mencari suatu teks yang diinginkan, meskipun boros tempat kosong pd layar.Teks-teks tertentu ditempatkan di posisi tertentu dengan harapan dapat langsung memusatkan perhatian pengguna.PengelompokanPengelompokan data yang saling berkaitan untuk mempermudah penstrukturan layar tampilan secara keseluruhan. Petunjuk adanya pengelompokan data bisa menggunakan beberapa karakter khusus.RelevansiMenampilkan pesan-pesan yang relevan/sesuai dengan topik yang sedang ditampilkan di layar.KonsistensiKadang pengguna dihadapkan pada sejumlah tampilan yang penuh informasi, sehingga perancang harus konsisten dalam menggunakan ruang tampilan yang tersedia.Misalnya pada sistem dengan tampilan dialog berbasis pengisian borang (frame).KesederhanaanMemberikan kemudahan bagi pengguna dalam memahami informasi yang ditampilkan.

PERANCANGAN TAMPILAN BERBASIS GRAFISDengan antarmuka berbasis grafis berbagai kemudahan dalam hal pengontrolan format tampilan dapat dikerjakan dengan lebih mudah dan fleksibilitas tampilan dapat semakin dirasakan oleh perancang tampilan maupun penggunanya.Disisi lain, kita harus memperhatikan beberapa kendala dalam penerapan antarmuka berbasis grafis, antara lain : waktu tanggap, kecepatan tampilan, lebar tampilan, dan tipe tampilan5 Faktor Penting pada Perancangan Interface Berbasis GrafisIlusi pada obyek-obyek yang dapat dimanipulasi, mis: gambar disket, printer, dllUrutan visual dan fokus pengguna, mis: tanda kedip untuk posisi kursor, penggunaan warna yang berbedaStruktur internal; berguna untuk menunjukkan bahwa obyek yang sedang dihadapi dapat dimodifikasi sesuai dengan keinginan userKosakata grafis yang konsisten dan sesuai, mis: gambar disket, printer, dllKesesuaian dengan media/informasi yang akan disampaikan1. Ilusi pada objek-objek yang dapat dimanipulasi.Perancangan antarmuka berbasis grafis harus melibatkan tiga komponen :- Kumpulan Objek- Penampilan objek-objek- Mekanisme yang konsisten2. Urutan visual dan Fokus pengguna

Antar muka grafis dapat digunakanuntuk menarik perhatian pengguna antara lain dengan membuat objek yang berkedip, menggunakan warna tertentu, serta menyajikan suatu animasi yang akan lebih menarik perhatian pengguna3. Struktur InternalPada