DESIGN INTERFACE

1. DESIGN INTERFACE

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

3. Prinsip User Interface (1) • Dalam perancangan antarmuka, ada beberapa prinsip yang harus diperhatikan (Deborah, 1992) : • Kompatibilitas Pengguna • Kompatibilitas Produk • Kompatibilitas Transisi Antar Tugas • Konsistensi • Kebiasaan • Kesederhanaan • Manipulasi Langsung

4. Prinsip User Interface (2) • Kontrol • Efektivitas (tepat dalam penggunaan) • Efisien dalam penggunaan • Keamanan dalam penggunaan • Kesesuaian Fungsi • Mudah dipelajari • Mudah diingat

5. 1. Kompatibilitas Pengguna

6. 2. Kompatibilitas Produk • Memungkinkan adanya perubahan antarmuka agar sistem menjadi lebih “kompatibel” bagi pengguna.

7. 3. Kompatibilitas Transisi Antar Tugas • Sistem harus dapat digunakan untuk memudahkan pengguna dalam melakukan tugasnya  fungsi-fungsi dalam antarmuka disesuaikan dengan kebutuhan pengguna.

8. 4. Konsistensi • Membantu pengguna untuk dapat menganalogikan dan memprediksi sesuatu yang sebelumnya belum pernah dilakukan.

9. 5. Kebiasaan • Konsep, terminologi, dan pengaturan antarmuka harus yang dapat dipahami oleh pengguna dengan baik agar pengguna tidak bingung saat berinteraksi.

10. 6. Kesederhanaan • Merancang antarmuka dengan bentuk yang sederhana, tanpa mengurangi fungsionalitas dari sistem/produk yang dibangun.

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

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

13. 8. Kontrol • Sistem selalu dibawah kontrol pengguna • Antarmuka 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.

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

15. 10. Efisien Dalam Penggunaan • Apakah sistem menyediakan fasilitas yang memudahkan pengguna dalam mengerjakan tugasnya.

16. 11. Keamanan Dalam Penggunaan • Untuk melindungi pengguna dalam menghadapi kondisi yang tidak diinginkan. • Salahsatu cara pengamanan, dengan membuat pesan dari aktivitas yang dilakukan pengguna.

17. 12. Kesesuaian Fungsi • Fungsi-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.

18. 13. Mudah Dalam Mempelajari • Sistem 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.

19. 14. Mudah Diingat • Mudah 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.

20. Hal-hal Yang Harus Diperhatikan Dalam Merancang Antarmuka • Apa 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?

21. Dokumentasi Rancangan • Membuat sketsa pada kertas • Menggunakan peranti prototipe GUI • Menulis tekstual yang menjelaskan tentang kaitan antara satu jendela dengan jendela yang lain • Menggunakan peranti bantu yg disebut CASE (Computer-Aided Software Engineering).

22. Kategori Program Aplikasi • Program 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.

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

24. Cara Pendekatan (2) • User Design Approach - pengguna sendiri yang merancang antarmuka yang diinginkan.

25. KomponenAntarmukaPengguna • Model pengguna; memungkinkan user untuk mengembangkan pemahaman yang mendasar tentang apa yang dikerjakan oleh program, bahkan oleh user yang sama sekali tidak mengetahui teknologi komputer • Bahasa perintah; sedapat mungkin menggunakan bahasa alami • Umpanbalik; kemampuan sebuah program yang membantu user untuk mengoperasikan program itu sendiri • Tampilan informasi; digunakan untuk menunjukkan status informasi atau program ketika user melakukan suatu tindakan

26. Urutan 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 tersebut • Perancangan format pesan; tata letak tampilan, keterangan tektual secara terinci, dan efisiensi inputing data harus mendapat perhatian lebih

27. UrutanPerancangan Dialog (2) • Perancanganpenanganankesalahan; untukmenghindariadanyakesalahan yang timbul, makaadanyakondisi yang disebut abnormal termination, yaitueksekusi program berhentikarenaterjadikesalahan. Bentukpenanganankesalahan : • Validasipemasukan data • Proteksipengguna • Pemulihandarikesalahan • Penampilanpesansalah yang tepatdansesuaidengankesalahanyangterjadipadawaktuitu.

28. Urutan Perancangan Dialog (3) 5. Perancanganstruktur data Setelahsemuaaspekantarmuadipertimbangkan, andaharusmenentukanstruktur data yang dapatdigunakanuntukmenyajikandanmendukungfungsionalkomponen-komponenantarmuka yang diperlukan. Struktur data iniharusdipetakanlangsungkedalam model pengguna yang telahdibuat. Hal iniperluditekankan agar keinginanpenggunadan model sistem yang telahdirancangsalingmempunyaikecocokan satu sama lain.

29. PERANCANGAN TAMPILAN BERBASIS TEKS 6 Faktor Agar Tata Letak Tampilan Urutan Penyajian Kelonggaran (Spaciousness) Pengelompokan Relevansi Konsistensi Kesederhanaan

30. Urutan Penyajian Urutan penyajian disesuaikan dengan model pengguna yang telah disusun. Harus ada kesepakatan antara perancang dengan calon pengguna tentang urutan tampilan yang akan digunakan.

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

32. Pengelompokan Pengelompokan data yang saling berkaitan untuk mempermudah penstrukturan layar tampilan secara keseluruhan. Petunjuk adanya pengelompokan data bisa menggunakan beberapa karakter khusus.

33. Relevansi Menampilkan pesan-pesan yang relevan/sesuai dengan topik yang sedang ditampilkan di layar.

34. Konsistensi Kadang 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).

35. Kesederhanaan Memberikan kemudahan bagi pengguna dalam memahami informasi yang ditampilkan.

37. PERANCANGAN TAMPILAN BERBASIS GRAFIS • Denganantarmukaberbasisgrafisberbagaikemudahandalamhalpengontrolan format tampilandapatdikerjakandenganlebihmudahdanfleksibilitastampilandapatsemakindirasakanolehperancangtampilanmaupunpenggunanya. • Disisi lain, kitaharusmemperhatikanbeberapakendaladalampenerapanantarmukaberbasisgrafis, antara lain : waktutanggap, kecepatantampilan, lebartampilan, dantipetampilan

38. 5 FaktorPentingpadaPerancangan Interface BerbasisGrafis • Ilusipadaobyek-obyek yang dapatdimanipulasi, mis: gambardisket, printer, dll • Urutan visual danfokuspengguna, mis: tandakedipuntukposisikursor, penggunaanwarna yang berbeda • Struktur internal; bergunauntukmenunjukkanbahwaobyek yang sedangdihadapidapatdimodifikasisesuaidengankeinginan user • Kosakatagrafis yang konsistendansesuai, mis: gambardisket, printer, dll • Kesesuaiandengan media/informasi yang akandisampaikan

39. 1. Ilusipadaobjek-objek yang dapatdimanipulasi. Perancanganantarmukaberbasisgrafisharusmelibatkantigakomponen : - Kumpulan Objek - Penampilanobjek-objek - Mekanisme yang konsisten

40. 2. Urutan visual danFokuspengguna • Antarmukagrafisdapatdigunakanuntukmenarikperhatianpenggunaantara lain denganmembuatobjek yang berkedip, menggunakanwarnatertentu, sertamenyajikansuatuanimasi yang akanlebihmenarikperhatianpengguna

41. 3. Struktur Internal • Padapengolahan kata kitaseringmenulisbeberapa kata yang berbedadengan kata-kata yang lain, misalnyaadasekelompok kata yang ditebalkan, dimiringkanataudiberigarisbawah. • Padaantarmukaberbasisgrafis, khusunyapadaobjek-objek yang dapatdimanipulasi, perancangjugaharusmemberikanstruktur internal (reveral structure)dalambentuk yang berbedadengan yang digunakanpadadokumentekstual, untukmemberitahupenggunasejauhmanapenggunadapatmengubahataumemanipulasiobjektersebut.

42. 4. Kosa kata grafis yang konsistendansesuai Pada program aplikasi yang berbeda, penggunaansimbolbiasanyadisesuaikandengankreatifitasperancangnya.

43. 5. Kesesuaiandenganpengguna • Karakteristikdarilayartampilan yang digunakanakanmempunyaipengaruh yang besarterhadapkeindahan “wajah” antarmuka yang akanditampilkan. • Dengansemakinnyacanggihnyateknologilayartampilanpadasaatini, kreatifitasperancangtampilanlah yang saatinilebihdituntutuntukmemenuhipermintaanpenggunaakanaspekkenyamanandankeramahanantarmuka.

44. Penanganan Kesalahan • Validasi pemasukan data, mis: jika user harus memasukkan bilangan positif, namun dia memasukkan data negatif atau nol, maka harus ada mekanisme untuk mengulang pemasukan data tersebut • Proteksi user; program memberi peringatan ketika user melakukan suatu tindakan secara tidak sengaja, mis: penghapusan berkas • Pemulihan dari kesalahan: tersedianya mekanisme untuk membatalkan tindakan yang baru saja dilakukan • Penampilan pesan salah yang tepat dan sesuai dengan kesalahan yang terjadi pada waktu itu

45. Kesalahandibagi 2, yaitu : • Kesalahanpadasaatimplementasi program yaitukesalahansintaks yang secaralangsungakandideteksiolehkompiler(compile-time error), terjadipadasaat program sedangdikompilasi. • KesalahanLogikaketika program sedangdijalankan, terjadipadasaat program dijalanka(run-time error atau fatal error). Kesalahaniniakanmengakibatkanterhentinya program secara abnormal.