1 / 38

PERANCANGAN ANTARMUKA - 2

PERANCANGAN ANTARMUKA - 2. Pertemuan Keenam Interaksi Manusia dan Komputer By : Viska Armalina, ST., M.Eng. Komponen Antarmuka Pengguna. Model Pengguna Bahasa Perintah Umpan Balik Penampilan Informasi. Model Pengguna.

alton
Download Presentation

PERANCANGAN ANTARMUKA - 2

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  1. PERANCANGAN ANTARMUKA - 2 Pertemuan Keenam Interaksi Manusia dan Komputer By : Viska Armalina, ST., M.Eng

  2. Komponen Antarmuka Pengguna • Model Pengguna • Bahasa Perintah • Umpan Balik • Penampilan Informasi

  3. Model Pengguna • Memungkinkan seorang pengguna untuk mengembangkan pemahaman mendasar tentang apa yang dikerjakan oleh program, bahkan oleh pengguna yang sama sekali tidak mengetahui teknologi. • Dapat berupa simulasi tentang keadaan dalam dunia nyata, sehingga tidak perlu mengembangkan dari awal.

  4. Bahasa Perintah (Command Language) • Merupakan peranti untuk memanipulasi model yang diinginkan pengguna. • Idealnya, program komputer mempunyai bahasa perintah yang alami, sehingga model pengguna dapat dengan cepat dioperasionalkan.

  5. Umpan Balik • Kemampuan sebuah program yang membantu pengguna untuk mengoperasikan program itu sendiri. • Umpan balik terutama ditujukan kepada pengguna yang belum berpengalaman dalam menjalankan program tersebut. • Biasanya berbentuk : pesan-pesan penjelasan, pesan penerimaan perintah, indikasi ada objek terpilih, penampilan karakter yang diketik lewat papan ketik.

  6. Tampilan Informasi • Digunakan untuk menunjukkan status informasi atau program ketika pengguna melakukan suatu tindakan. • Pesan-pesan informasi tersebut harus seefektif mungkin, sehingga mudah dipahami oleh pengguna.

  7. Perancangan Dialog

  8. Urutan Perancangan Dialog • Pemilihan Ragam Dialog • Perancangan Struktur Dialog • Perancangan Format Pesan • Perancangan Penanganan Kesalahan • Perancangan Struktur Data

  9. 1. Pemilihan Ragam Dialog • Pemilihan ragam dialog dipengaruhi oleh : - karakteristik populasi pengguna - tipe dialog yang diperlukan -kendala teknologi yang ada untuk mengimplementasikan ragam dialog tersebut. • Ragam dialog yang terpilih dapat berupa sebuah ragam tunggal atau bisa juga sekumpulan ragam dialog yang saling mendukung satu sama lain.

  10. 2. Perancangan Struktur Dialog • Analisis tugas dan menentukan model pengguna dari tugas tersebut untuk membentuk struktur dialog yang sesuai. • Sebaiknya banyak melibatkan pengguna, sehingga pengguna dapat langsung mendapat umpan balik yang berupa diskusi informas maupun prototipe dari dialog yang nantinya akan dia gunakan.

  11. 3. Perancangan Format Pesan • Yang harus diperhatikan dalam tahap ini : • Tata letak tampilan dan keterangan tekstual secara terinci • Kebutuhan data masukan yang mengharuskan pengguna untuk memasukkan data ke komputer juga harus efisien  kurangi pengetikan yang tidak perlu, maksimalkan penggunaan tombol.

  12. 4. Perancangan Penanganan Kesalahan (1) • Kesalahan yang sering terjadi : • Pengguna salah memasukkan data • Programnya melakukan operasi yang tidak sah • Kondisi Abnormal Termination : eksekusi program terhenti karena terjadi kesalahan.

  13. 4. Perancangan Penanganan Kesalahan (2) Bentuk-bentuk penanganan kesalahan yang dapat dilakukan : • Validasi pemasukan data ada pesan untuk mengulang pemasukan. • Proteksi pengguna  program memberi peringatan ketika pengguna melakukan kesalahan tanpa sengaja. • Pemulihan dari kesalahan  menyediakan mekanisme untuk membatalkan tindakan yang baru saja dilakukan. • Penampilan pesan salah yang tepat dan sesuai kesalahan yang terjadi.

  14. 5. Perancangan Struktur Data • Menentukan struktur data yang dapat digunakan untuk menyajikan dan mendukung fungsionalitas komponen-komponen antarmuka yang diperlukan. • Struktur data ini dipetakan langsung ke dalam model pengguna yang telah dibuat, meskipun tingkat kerumitan antara satu aplikasi dengan aplikasi lain berbeda  agar keinginan pengguna dan model sistem yang dirancang saling cocok satu sama lain.

  15. Perancangan Tampilan Berbasis Teks

  16. 6 Faktor Agar Tata Letak Tampilan Berkualitas Tinggi • Urutan Penyajian • Kelonggaran (Spaciousness) • Pengelompokan • Relevansi • Konsistensi • Kesederhanaan

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

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

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

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

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

  22. Kesederhanaan • Memberikan kemudahan bagi pengguna dalam memahami informasi yang ditampilkan.

  23. Perancangan Tampilan Berbasis Grafis

  24. Kelebihan Perancangan Berbasis Grafis • Memudahkan dalam hal pengontrolan format tampilan . • Fleksibilitas tampilan dapat semakin dirasakan oleh perancang maupun penggunanya.

  25. Kendala Dalam Penerapan Antarmuka Berbasis Grafis • Waktu tanggap • Kecepatan penampilan • Tipe tampilan (berorientasi ke tekstual atau grafis?).

  26. 5 Faktor Yang Harus Diperhatikan Dalam Merancang Antarmuka Berbasis Grafis • Ilusi pada obyek-obyek yang dapat dimanipulasi • Urutan visual dan fokus pengguna • Struktur internal • Kosakata grafis yang konsisten dan sesuai • Kesesuaian dengan media

  27. 1. Ilusi Pada Obyek-Obyek Yang Dapat Dimanipulasi • Perancangan antarmuka berbasis grafis yang efektif harus melibatkan tiga komponen: Pertama, gunakan kumpulan obyek yang disesuaikan dengan aplikasi yang akan dibuat. Jika obyek-obyek itu belum ada, kita dapat mengembangkannya sendiri. Kedua, penampilan obyek-obyek grafis harus dilakukan dengan keyakinan bahwa ia akan dengan mudah dimengerti oleh pengguna. Ketiga, gunakan mekanisme yang konsisten untuk memanipulasi obyek yang akan muncul dilayar.

  28. 2. Urutan Visual dan Fokus Pengguna • Antarmuka dapat digunakan untuk menarik perhatian pengguna antara lain dengan membuat suatu obyek berkedip, menggunakan warna tertentu untuk obyek-obyek tertentu, serta menyajikan suatu animasi yang akan lebih menarik perhatian pengguna. • Namun penggunaan rangsangan visual yang berlebihan justru akan membuat pengguna bingung dan merasa tidak nyaman.

  29. 3. Struktur Internal (1) • Pada pengolah kata kita seringkali menulis beberapa kata yang berbeda dengan kata-kata yang lain, misalnya ada sekelompok kata yang ditebalkan, dimiringkan, atau diberi garis bawah. • Reveal code, yakni suatu tanda khusus yang digunakan untuk menunjukkan adanya perbedaan font style. • Reveal code tidak akan ikut dicetak, tetapi digunakan untuk menunjukkan kepada pengguna antara lain tentang font style yang digunakan, batas kiri dan batas kanan dari halaman teks, informasi yang lain. • Reveal code biasanya berupa suatu karakter khusus.

  30. 3. Struktur Internal (2) • Pada obyek yang dapat dimanipulasi, perancang juga harus memberikan struktur internal (Reveal Structure) dalam bentuk yang berbeda dengan yang digunakan pada dokumen tekstual  gunanya untuk memberitahu pengguna sampai sejauh mana pengguna dapat mengubah/memanipulasi obyek tersebut.

  31. 4. Kosakata Grafis Yang Konsisten Dan Sesuai • Penggunaan simbol obyek/icon disesuaikan dengan kreatifitas perancangnya.  Tidak ada standardnya. • Pada sebuah program aplikasi, hendaknya simbol yang sama digunakan untuk tujuan yang sama sehingga pengguna tidak bingung ketika harus melakukan aktivitas yang diinginkan.

  32. 5. Kesesuaian Dengan Media • Karakteristik khusus dari layar tampilan yang digunakan akan 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 pengguna akan aspek kenyamanan dan keramahan antarmuka.

  33. Waktu Tanggap (1) • Keinginan pengguna  program aplikasinya memberikan waktu tanggap yang sependek-pendeknya. • Aspek-aspek yang mempengaruhi waktu tanggap : • Ragam interaksi yang diinginkan • Kefasihan pengguna dalam menjalankan program aplikasi tersebut. • Waktu tanggap yang berbeda-beda dapat mempengaruhi konsentrasi pengguna sehingga mempengaruhi kinerja pengguna.

  34. Waktu Tanggap (2) • Waktu tanggap yang lama (misalnya lebih dari 14 detik), menyebabkan perhatian pengguna terpecah ke aktivitas lain, sehingga dia cenderung melakukan aktivitas lain sampai sistem menyelesaikan apa yang harus dia kerjakan. • Contoh : saat mengisi formulir online/registrasi, memilih menu, memberi perintah, dll.

  35. Penanganan Kesalahan • Penanganan kesalahan yang tepat dilakukan dengan memberikan pesan umpan balik kepada pengguna akan keadaan eksekusi program saat itu. • Kesalahan pada program dapat disebabkan oleh dua hal: pertama, kesalahan sintaksis yang bisa dideteksi kompiler biasa disebut compile-time error. kedua,kesalahan logika ketika program dijalankan biasa disebut run-time error atau fatal error.

  36. Peranti Bantu Sederhana • Perancang seharusnya membuat dokumentasi akan bentuk-bentuk tampilan yang akan diimplementasikan. • Peranti bantu sederhana yang dapat digunakan misalnya adalah lembar kerja tampilan/LKT (screen design work sheet). • Pada LKT, disajikan empat bagian: • 1. Nomor lembar kerja • 2. Bagian tampilan  sketsa tampilan • 3. Bagian navigasi • 4. Bagian keterangan

More Related