Download - DESIGN INTERFACE

Transcript
Page 1: DESIGN INTERFACE

DESIGN INTERFACE

Page 2: DESIGN INTERFACE

Pendahuluan Antarmuka

pengguna (User Interface) : bagian sistem komputer yang memungkinkan manusia berinteraksi dengan komputer.

Perancangan antarmuka : proses penggambaran bagaimana sebuah bagian sistem dibentuk.

Interaksi Manusia dan Komputer

Page 3: DESIGN INTERFACE

Prinsip User Interface (1) Dalam perancangan antarmuka, ada

beberapa prinsip yang harus diperhatikan (Deborah, 1992) :

1. Kompatibilitas Pengguna2. Kompatibilitas Produk3. Kompatibilitas Transisi Antar Tugas4. Konsistensi5. Kebiasaan6. Kesederhanaan7. Manipulasi Langsung

Page 4: DESIGN INTERFACE

Prinsip User Interface (2)8. Kontrol9. Efektivitas (tepat dalam penggunaan)10. Efisien dalam penggunaan11. Keamanan dalam penggunaan12. Kesesuaian Fungsi13. Mudah dipelajari14. Mudah diingat

Page 5: DESIGN INTERFACE

1. Kompatibilitas Pengguna

Page 6: DESIGN INTERFACE

2. Kompatibilitas ProdukMemungkinkan adanya perubahan

antarmuka agar sistem menjadi lebih “kompatibel” bagi pengguna.

Page 7: DESIGN INTERFACE

3. Kompatibilitas Transisi Antar TugasSistem harus dapat digunakan

untuk memudahkan pengguna dalam melakukan tugasnya fungsi-fungsi dalam antarmuka disesuaikan dengan kebutuhan pengguna.

Page 8: DESIGN INTERFACE

4. Konsistensi Membantu pengguna untuk dapat

menganalogikan dan memprediksi sesuatu yang sebelumnya belum pernah dilakukan.

Page 9: DESIGN INTERFACE

5. Kebiasaan Konsep, terminologi, dan pengaturan

antarmuka harus yang dapat dipahami oleh pengguna dengan baik agar pengguna tidak bingung saat berinteraksi.

Page 10: DESIGN INTERFACE

6. Kesederhanaan Merancang antarmuka dengan bentuk

yang sederhana, tanpa mengurangi fungsionalitas dari sistem/produk yang dibangun.

Page 11: DESIGN INTERFACE

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

Page 12: DESIGN INTERFACE

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

Page 13: DESIGN INTERFACE

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.

Page 14: DESIGN INTERFACE

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.

Page 15: DESIGN INTERFACE

10. Efisien Dalam Penggunaan Apakah sistem menyediakan fasilitas

yang memudahkan pengguna dalam mengerjakan tugasnya.

Page 16: DESIGN INTERFACE

11. Keamanan Dalam Penggunaan Untuk melindungi pengguna dalam

menghadapi kondisi yang tidak diinginkan.

Salahsatu cara pengamanan, dengan membuat pesan dari aktivitas yang dilakukan pengguna.

Page 17: DESIGN INTERFACE

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.

Page 18: DESIGN INTERFACE

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.

Page 19: DESIGN INTERFACE

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.

Page 20: DESIGN INTERFACE

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?

Page 21: DESIGN INTERFACE

Dokumentasi Rancangana) Membuat sketsa pada kertasb) Menggunakan peranti prototipe GUIc) Menulis tekstual yang menjelaskan

tentang kaitan antara satu jendela dengan jendela yang lain

d) Menggunakan peranti bantu yg disebut CASE (Computer-Aided Software Engineering).

Page 22: DESIGN INTERFACE

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.

Page 23: DESIGN INTERFACE

Cara Pendekatan (1)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.

Page 24: DESIGN INTERFACE

Cara Pendekatan (2)2. User Design Approach

- pengguna sendiri yang merancang antarmuka yang diinginkan.

Page 25: DESIGN INTERFACE

Komponen Antarmuka Pengguna

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

2. Bahasa perintah; sedapat mungkin menggunakan bahasa alami

3. Umpanbalik; kemampuan sebuah program yang membantu user untuk mengoperasikan program itu sendiri

4. Tampilan informasi; digunakan untuk menunjukkan status informasi atau program ketika user melakukan suatu tindakan

Page 26: DESIGN INTERFACE

Urutan Perancangan Dialog (1)1. Pemilihan ragam dialog,

dipengaruhi oleh karakteristik populasi pengguna, tipe dialog yang diperlukan, dan kendala teknologi yang ada untuk mengimplementasikan ragam dialog tersebut.

2. Perancangan struktur dialog; melakukan analisis tugas dan menentukan model pengguna dari tugas tersebut

3. Perancangan format pesan; tata letak tampilan, keterangan tektual secara terinci, dan efisiensi inputing data harus mendapat perhatian lebih

Page 27: DESIGN INTERFACE

Urutan Perancangan Dialog (2)

4. 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 kesalahan

Penampilan pesan salah yang tepat dan sesuai dengan kesalahan yangterjadi pada waktu itu.

Page 28: DESIGN INTERFACE

Urutan Perancangan Dialog (3)5. Perancangan struktur data

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

Page 29: DESIGN INTERFACE

6 Faktor Agar Tata Letak Tampilan1. Urutan Penyajian2. Kelonggaran (Spaciousness)3. Pengelompokan4. Relevansi5. Konsistensi6. Kesederhanaan

PERANCANGAN TAMPILAN BERBASIS TEKS

Page 30: DESIGN INTERFACE

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.

Page 31: DESIGN INTERFACE

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.

Page 32: DESIGN INTERFACE

Pengelompokan Pengelompokan data yang saling berkaitan

untuk mempermudah penstrukturan layar tampilan secara keseluruhan.

Petunjuk adanya pengelompokan data bisa menggunakan beberapa karakter khusus.

Page 33: DESIGN INTERFACE

Relevansi Menampilkan pesan-pesan yang relevan/sesuai

dengan topik yang sedang ditampilkan di layar.

Page 34: DESIGN INTERFACE

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

Page 35: DESIGN INTERFACE

Kesederhanaan Memberikan kemudahan bagi pengguna dalam

memahami informasi yang ditampilkan.

Page 36: DESIGN INTERFACE
Page 37: DESIGN INTERFACE

PERANCANGAN TAMPILAN BERBASIS GRAFIS 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, antara lain : waktu tanggap, kecepatan tampilan, lebar tampilan, dan tipe tampilan

Page 38: DESIGN INTERFACE

5 Faktor Penting pada Perancangan Interface Berbasis Grafis

Ilusi pada obyek-obyek yang dapat dimanipulasi, mis: gambar disket, printer, dll

Urutan visual dan fokus pengguna, mis: tanda kedip untuk posisi kursor, penggunaan warna yang berbeda

Struktur internal; berguna untuk menunjukkan bahwa obyek yang sedang dihadapi dapat dimodifikasi sesuai dengan keinginan user

Kosakata grafis yang konsisten dan sesuai, mis: gambar disket, printer, dll

Kesesuaian dengan media/informasi yang akan disampaikan

Page 39: DESIGN INTERFACE

1. Ilusi pada objek-objek yang dapat dimanipulasi.Perancangan antarmuka berbasis grafis

harus melibatkan tiga komponen :- Kumpulan Objek- Penampilan objek-objek- Mekanisme yang konsisten

Page 40: DESIGN INTERFACE

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

Page 41: DESIGN INTERFACE

3. Struktur InternalPada 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, khusunya pada objek-objek yang dapat dimanipulasi, perancang juga harus memberikan struktur internal (reveral structure) dalam bentuk yang berbeda dengan yang digunakan pada dokumen tekstual, untuk memberi tahu pengguna sejauh mana pengguna dapat mengubah atau memanipulasi objek tersebut.

Page 42: DESIGN INTERFACE

4. Kosa kata grafis yang konsisten dan sesuai

Pada program aplikasi yang berbeda, penggunaan simbol biasanya disesuaikan dengan kreatifitas perancangnya.

Page 43: DESIGN INTERFACE

5. Kesesuaian dengan pengguna Karakteristik dari layar tampilan yang

digunakan akan mempunyai pengaruh yang besar terhadap keindahan “wajah” antarmuka yang akan ditampilkan.

Dengan semakinnya canggihnya teknologi layar tampilan pada saat ini, kreatifitas perancang tampilanlah yang saat ini lebih dituntut untuk memenuhi permintaan pengguna akan aspek kenyamanan dan keramahan antarmuka.

Page 44: DESIGN INTERFACE

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

Page 45: DESIGN INTERFACE

Kesalahan dibagi 2, yaitu : Kesalahan pada saat implementasi program yaitu

kesalahan sintaks yang secara langsung akan dideteksi oleh kompiler (compile-time error), terjadi pada saat program sedang dikompilasi.

Kesalahan Logika ketika program sedang dijalankan, terjadi pada saat program dijalanka(run-time error atau fatal error). Kesalahan ini akan mengakibatkan terhentinya program secara abnormal.


Top Related