ppt_IMK-design-interface
- 2. Design Interface Design interface adalah proses perancangan design interaksi antara komputer dan pengguna. Tujuan dari design interface adalah agar pengguna dapat menggunakan suatu program atau sistem secara sederhana dan se efisien mungkin.
- 3. Design Interface Hal yang perlu diperhatikan dalam design interface 1. Salah satu kriteria penting dari sebuah antar muka adalah tampilan yang menarik. Seorang pengguna, apalagi pengguna baru, biasanya tertarik untuk mencoba sebuah program aplikasi dengan terlebih dahulu tertarik pada suatu tampilan yang ada dihadapan matanya. Contoh gambar 1. Dengan tampilan yang simple dan menarik. Dapat membuat seluruh pengguna tertarik untuk mencoba program tersebut.
- 4. Design Interface 2.Hal yang perlu diperhatikan oleh perancang antarmuka adalah penyimpadan data semua pekerjaan yang ia lakukan. Dengan penyimpanan yang baik, ia dapat mengubah rancangannya apabila menurutnya rancangan tidak mudah untuk diimplementasikan atau rancangan tersebut mengalami perubahan disesuaikan dengan usulan dari pengguna. Contoh gambar 2. Rancangan pada suatu program dapat diubah kapanpun selama data disimpan dengan baik.
- 5. Design Interface Program aplikasi, pada dasarnya dapat dikelompokkan ke dalam dua kategori besar, yakni : ◦ program aplikasi untuk keperluan khusus dengan pengguna yang khusus pula (special purpose software) ◦ program aplikasi yang akan digunakan oleh banyak pengguna (general purpose software) atau public software. 1.1. CARA PENDEKATANCARA PENDEKATAN
- 6. Design Interface Cara pendekatan untuk program aplikasi keperluan khusus dengan pengguna yang khusus pula cara pendekatan yang dilakukan diistilahkan dengan User centered design approach User centered design approach adalah perancangan antarmuka yang melibatkan penguna. Perancang dan pengguna bersama sama merancang antarmuka yang diinginkan pengguna, sehingga dengan cara ini pengguna memiliki autentikasi tertentu dalam penggunaan program tersebut. Contoh dalam User centered design approach adalah progam yang memiliki sistem login. a. Special Purpose Softwarea. Special Purpose Software
- 7. Design Interface Contoh dari special purpose program Program aplikasi kasir. Pelayanan Reservasi hotel.
- 8. Design Interface Program aplikasi yang akan digunakan oleh banyak pengguna dengan berbagai tingkat kepandaian dan karakteristik yang sangat beragam, perlu memiliki salah satu kunci penting dalam pembuatan modul antarmuka dengan melakukan customizazion, sehingga pengguna dapat menggunakan program aplikasi dengan wajah antarmukanya yang sesuai dengan selera masing-masing pengguna. Cara pendekatan untuk program aplikasi ini mengunakan User design approach, dimana pengguna sendirilah yang merancang wajah antarmuka yang diinginkan. b.b. General purpose software/ PublicGeneral purpose software/ Public softwaresoftware
- 9. Design InterfaceContoh dari general purpose software adalah: Microsoft word karena program tersebut dapat membuat penggunanya untuk merancang sendiri seperti ukuran kertas, jenis tulisan dll, dalam dokumen yang kita buat. Winamp program media player ini menyediakan berbagai macam skin, visualization atau fitur lain untuk mengubah tampilan program itu sendiri.
- 10. Design Interface Antarmuka pengguna secara alamiah terbagi menjadi empat komponen: 1.Model pengguna 2.Bahasa perintah 3.Umpan balik 4.Penampilan informasi 2.2. PRINSIP DAN PETUNJUKPRINSIP DAN PETUNJUK PERANCANGANPERANCANGAN
- 11. Design Interface 1. Model pengguna merupakan model konseptual yang diinginkan oleh pengguna dalam memanipulasi informasi dan proses yang dia aplikasikan pada informasi tersebut. Model pengguna dapat berupa suatu simulasi tentang keadaan yang sebenarnya dalam dunia nyata, sehingga ia tidak perlu mengembangkan sendiri dari awal. 2. Setelah pengguna mengetahui dan memahami model yang diinginkan, dia memerlukan peranti bahasa perintah (Command language) untuk memanipulasi model itu.
- 12. Design Interface Contoh model pengguna pada design interface. Dalam Visual basic 6.0, User dapat membuat konsep dari program yang diinginkan oleh pengguna tanpa harus mengembangkan sendiri dari awal.
- 13. Design Interface Komponen yang ketiga umpan balik. Umpan balik disini diartikan sebagai kemampuan sebuah program yang membantu pengguna untuk mengoperasikan program itu sendiri. Umpan balik dapat digunakan untuk memberi keyakinan bahwa program telah menerima perintah pengguna dan dapat memahami maksud perintah tersebut. Komponen keempat adalah tampilan informasi. Komponen ini digunakan untuk menunjukan status informasi suatu program ketika pengguna melakukan suatu tindakan.
- 14. Design Interface Contoh dari umpan balik dan tampilan informasi : Aplikasi Winrar memiliki tampilan informasi ketika user meng extract suatu file. Lalu ketika proses extract memiliki kendala (seperti file yang sama di dalam suatu folder) akan muncul tampilan Umpan balik untuk membantu user dalam mengatasi kendala tersebut.
- 15. Design Interface Pemilihan Ragam Dialog Adalah Kemampuan untuk memahami berbagai sistem interaksi antara user dan sistem komputer. Ragam dialog yang dipilih dapat berupa sebuah ragam dialog tunggal, atau sekumpulan ragam dialog yang satu sama lain saling mendukung Perancangan Struktur Dialog Tahap kedua adalah melakukan analisis tugas dan menentukan model pengguna dari tugas tersebut untuk membentuk struktur dialog yang sesuai a.a. Urutan PerancanganUrutan Perancangan
- 16. Design Interface Secara umum ragam dialog dikelompokkan menjadi beberapa kategori seperti: command line programming language Menu form filling Ikon interaksi grafis.
- 17. Design Interface Contoh dari beberapa ragam dialog : CLI (Command Line Interface) CLI adalah tipe ragam dialog dimana pengguna berinteraksi dengan sistem operasi melalui text-terminal. Pengguna menjalankan perintah dan program di sistem operasi tersebut dengan cara mengetikkan baris-baris tertentu.
- 18. Design Interface Bahasa pemograman (Programming language) Bahasa pemrograman adalah instruksi standar untuk memerintah komputer. Bahasa ini memungkinkan seorang programmer dapat menentukan secara persis data mana yang akan diolah oleh komputer, bagaimana data ini akan disimpan/diteruskan, dan jenis langkah apa secara persis yang akan diambil dalam berbagai situasi.
- 19. Design Interface Perancangan Format Pesan. Dalam tahap ini tata letak tampilan dan keterangan tekstual harus secara terinci untuk menjaga keefisiensian sistem. Perancangan Penanganan Kesalahan Untuk menghindari adanya kondisi kesalahan yang timbul, maka adanya kondisi yang disebut abnormal termination, yaitu eksekusi program berhenti karena terjadi kesalahan. Bentuk- bentuk penanganan kesalahan yang dapat dilakukan antara lain : ◦ Validasi pemasukan data. ◦ Proteksi pengguna. ◦ Pemulihan dari kesalahan. ◦ Penampilan pesan salah yang tepat dan sesuai dengan kesalahan yang terjadi pada waktu itu.
- 20. Design Interface Contoh dalam penanganan kesalahan : Di dalam aplikasi pemograman borland c++, jika user mengalami kesalahan dalam memasukan bahasa program. Aplikasi tersebut akan langsung menghentikan eksekusi dari program yang dibuat dan akan menampilkan pesan error untuk Penanganan kesalahan.
- 21. Design Interface Perancangan Struktur Data Setelah semua aspek antarmuka dipertimbangkan, Anda harus menentukan struktur data yang dapat digunakan untuk menyajikan dan mendukung fungsionalitas komponen-komponen antarmuka yang diperlukan. Struktur data ini harus dipetakan langsung kedalam model pengguna yang telah dibuat. Hal ini perlu ditekankan agar keinginan pengguna dan model sistem yang telah dirancang saling mempunyai kecocokan satu sama lain.
- 22. Design Interface Pada perancangan tampilan untuk antarmuka berbasis teks, ada enam faktor yang harus dipertimbangkan agar diperoleh tata letak tampilan yang berkualitas tinggi, yaitu: ◦ Urutan penyajian ◦ Kelonggaran (Spaciousness) ◦ Pengelompokkan ◦ Relevansi ◦ Kesederhanan b.b. Perancangan Tampilan Berbasis TeksPerancangan Tampilan Berbasis Teks
- 23. Design Interface
- 24. Design Interface Dengan 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 ini, antara lain: waktu tanggap, kecepatan tampilan, lebar tampilan, dan tipe tampilan c.c. Perancangan Tampilan BerbasisPerancangan Tampilan Berbasis GrafisGrafis
- 25. Design Interface Pengguna tidak harus mengingat perintah-perintah yang sering kali cukup panjang, tetapi cukup dikerjakan dengan melihat dan kemudian menunjuk kesuatu gambar yang mewakili suatu aktifitas (Ikon). Penggunaan barang property atau option untuk mengatur kenampakan (wajah) desktop. Kemampuan WYSIYG. Perintah-perintah yang berlaku umum, seperti MOVE, DELETE, atau COPY, dan lain-lain Contoh beberapa kemampuan padaContoh beberapa kemampuan pada MicrosoftMicrosoft windows:windows:
- 26. Design Interface 1. Ilusi pada obyek-obyek yang dapat dimanipulasi Perancangan antarmuka berbasis grafis yang efektif harus melibatkan tiga komponen: Kumpulan obyek. Penampilan obyek-obyek. Mekanisme yang konsisten Faktor yang perlu diperhatikan pada perancanganFaktor yang perlu diperhatikan pada perancangan antarmuka berbasis grafis, antara lain:antarmuka berbasis grafis, antara lain:
- 27. Design Interface 2. Urutan Visual dan fokus pengguna Antarmuka grafis dapat digunakan untuk menarik perhatian pengguna antara lain dengan membuat sesuatu obyek berkedip, menggunakan warna tertentu untuk obyek- obyek tertentu, serta menyajikan suatu animasi yang akan lebih menarik perhatian pengguna
- 28. Design Interface 3. Struktur Internal Pada pengolahan kata kita sering menulis beberapa kata yang berbeda dengan kata-kata yang lain, misalnya ada sekelompok kata yang ditebalkan, dimiringkan, atau diberi garis bawah. Pada antarmuka berbasis grafis, khususnya pada obyek- obyek yang dapat dimanipulasi, perancang juga harus memberikan struktur internal (reveral structure), dalam bentuk yang berbeda dengan yang digunakan pada dokumen tekstual, untuk memberitahu si pengguna sejauh mana pengguna dapat mengubah atau memanipulasi obyek tersebut
- 29. Design Interface 4. Kosakata grafis yang konsisten dan sesuai Pada program aplikasi yang berbeda penggunaan simbol biasanya disesuaikan dengan kreatifitas perancangnya, Contoh, simbol banyak digunakan untuk menyatakan aktifitas penyimpanan data
- 30. Design Interface 5. Kesesuaian dengan pengguna Karakteristik dari layar tampilan yang digunakanakan mempunyai pengaruh yang besar terhadap keindahan ”wajah” antarmuka yang akan ditampilkan. Dengan semakin canggihnya teknologi layar tampilan pada saat ini, kreatifitas perancang tampilanlah yang saat ini lebih dituntut untuk memenuhi permintaan penggunaan aspek kenyamanan dan keramahan antarmuka.
- 31. Design Interface Secara umum, pengguna menginginkan bahwa program aplikasinya dapat memberikan waktu tanggap yang sependek- pendeknya. Tetapi waktu tanggap yang baik memang tidak dapat ditentukan, karena ada beberapa aspek yang mempengaruhi, antara lain: ◦ Ragam interaksi yang diinginkan ◦ Kefasihan pengguna dalam menjalankan program aplikasi tersebut. Waktu tanggap yang berbeda-beda dapat mempengaruhi konsentrasi pengguna yang pada gilirannya akan mempengaruhi kinerja pengguna. d. Waktu Tanggapd. Waktu Tanggap
- 32. Design Interface Dalam dunia Komputer, kesalahan yang kecil dapat berakibat fatal. Sehingga, harus dicari suatu upaya agar kesalahan-kesalahan yang dilakukan oleh pengguna dapat dihindari atau ditangani dengan cara-cara tertentu agar tidak mengakibatkan terhentinya eksekusi sebuah program aplikasi yang sedang dioperasikan. e. Penanganan Kesalahane. Penanganan Kesalahan
- 33. Design Interface Kesalahan pada saat implementasi program, yakni kesalahan sintaksis yang secara langsung akan dideteksi oleh kompiler (compile-time error), terjadi pada saat program sedang dikompilasi. Sebelum kesalahan itu dibetulkan, program tidak akan dapat dioperasikan. Kesalahan logika ketika program sedang dijalankan (run- time error atau fatal error), terjadi pada saat program dijalankan. Kesalahan ini akan mengakibatkan terhentinya program secara abnormal. Kesalahan dibagi dua, yakni :Kesalahan dibagi dua, yakni :
- 34. Design Interface Piranti bantu yang akan dijelaskan hanya berbentuk lembaran kertas yang tidak perlu disiapkan secara khusus, tetapi dapat menggunakan sembarang kertas kosong. Untuk mempermudah penamaan, maka lembaran kertas yang dimaksud diberi nama dengan lembar kerja tampilan (LKT). 3. Piranti Bantu Sederhana3. Piranti Bantu Sederhana
- 35. Design Interface LKT pada umumnya terdiri atas empat bagian, yaitu: Nomor lembar kerja. Bagian Tampilan : berisi sketsa tampilan yang akan muncul dilayar. Bagian Navigator : bagian ini antara lain menjelaskan kapan tampilan ini akan muncul dan kapan tampilan itu berubah menjadi tampilan lain. Perubahan tampilan biasanya disebabkan oleh adanya suatu event. Event tersebut antara lain dapat berupa penekanan tombol mouse atau papan ketik. Bagian Keterangan : berisi penjelasan singkat tentang atribut tampilan yang akan dipakai.
- 36. Design Interface Contoh Perancangan tampilan menggunakan LKT
- 37. Design Interface Semantik Model merupakan model relasi antara objek dasar tidak dinyatakan dengan simbol tetapi menggunakan kata- kata. Digunakan untuk mempermudah bagi pemrogram pada saat ia menuliskan program untuk disesuaikan dengan navigasi pada setiap lembar kerja. Pada jaring semantik tampilan terdiri atas dua komponen : Nomor tampilan (biasa diberi notasi dengan lingkaran) Transisi yang menyebabkan perpindahan perpindahan ke tampilan yang lain (biasa diberi notasi dengan anak panah) 4. Jaring Semantik Tampilan4. Jaring Semantik Tampilan
- 38. Design Interface