PERANCANGAN ANTARMUKA - 2

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.

24. Perancangan Tampilan Berbasis Grafis

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

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

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

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

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

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

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

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

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

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

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

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

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