Oleh: Syukriya Al Asyik, S.kom

Presentasi berjudul: "Oleh: Syukriya Al Asyik, S.kom"— Transcript presentasi:

1 Oleh: Syukriya Al Asyik, S.kom
ANTAR MUKA INTERAKTIF Oleh: Syukriya Al Asyik, S.kom

2 Strategi Pengembangan Antarmuka
sebuah program aplikasi terdiri atas dua bagian penting. 1. bagian antarmuka 2. bagian aplikasi

3 pengembangan bagian antarmuka perlu memperhatikan:
mekanisme fungsi manusia sebagai pengguna komputer Berbagai informasi yang berhubungan dengan karakteristik dialog yang cukup lebar, seperti ragam dialog, struktur, isi tekstual dan grafis, tanggapan waktu, dan kecepatan tampilan Penggunaan protitipe yan didasrkan pada spesifikasi dialog formal yang disusun secara bersama-sama antara (calon) pengguna dan perancang sistem, serta peranti yang mungkin dapat digunakan untuk mempercepat proses pembuatan prototipe

4 pengembangan bagian antarmuka perlu memperhatikan (cont):
Teknik evaluasi yang digunakan untuk mengevaluasi hasil proses prototipe yang telah dilakukan, yaitu secara analitis berdsarkan pada analisis atas transaksi dialog, secara empirik menggunakan uji coba pada sejumlah kasus,umpan balik pengguna yang dapat dikerjakan dengan tanya jawab maupun kuesioner, dan beberapa analisis yang dikerjakan oleh ahli antarmuka.

5 User Interface Design Tips and Techniques
1. Konsistensi. 2. Buatlah standarisasi yang selalu dipatuhi dalam segala hal. 3. Jelaskan aturan yang dipakai. 4. Beri dukungan, baik untuk pemula (novice) atau pemakai mahir (expert). 5. Kemudahan navigasi dari layar ke layar lainnya. 6. Kemudahan navigasi pada suatu layar. 7. Gunakan kata-kata yang jelas pada message dan label. 8. Gunakan komponen sesuai dengan fungsinya. 9. Pelajari aplikasi lain yang sejenis. 10. Gunakan warna seperlunya.

6 User Interface Design Tips and Techniques (Cont..)
11. Ikuti aturan kekontrasan warna. 12. Gunakan font seperlunya. 13. Gunakan fasilitas disable untuk fasilitas yang tidak relevan, jangan dihilangkan. 14. Gunakan tombol default yang tidak berbahaya / fatal. 15. Gunakan field alignment. 16. Justify data seperlunya. 17. Jangan membuat layar yang penuh informasi. 18. Buatlah pengelompokan informasi pada layar. 19. Tampilkan window yang akan diaktifkan dilokasi yang sesuai. 20. Jangan hanya menggantungkan functionality aplikasi pada menu pop-up.

7 Contoh:

8

9

10

11

12 Contoh : WEB Design Banner/ Logo
Sebuah banner atau logo merupakan tampilan awal pada sebuah halaman web. Hal ini merupakan suatu identitas khusus bagi situs web sehingga dapat mengingatkan audiens, sedang berada di situs web manakah mereka berada.

13 WEB DESIGN Statement of Purpose
Sebaris kalimat pada tampilan awal web dengan maksud untuk menjelaskan pertama kali kepada audiens, untuk apa dan siapa situs web tersebut ditujukan.

14 WEB DESIGN Table of Content
Merupakan tampilan daftar isi pada sebuah halaman web yang dimaksudkan sebagai petunjuk informasi apa yang akan dilihat oleh audiens. Seperti halnya daftar isi pada sebuah buku yang menunjukan letak halaman pada setiap topik yang dimaksud.

15 WEB DESIGN Kickers yaitu sebuah kalimat pendek atau sebuah image yang merupakan gambaran kepada audiens ke arah informasi atau berita yang akan disampaikan. Mereka tinggal meng-klik, selanjutnya akan dihubungkan pada pokok berita yang dimaksud.

16

17 WEB DESIGN Artwork/Photographs
Tampilan gambar atau foto yang menceritakan maksud dari informasi yang disampaikan pada halaman web. LAYOUT Layout adalah merupakan tampilan gambar dan teks pada suatu halaman web yang tersusun sehingga enak untuk dilihat dan dibaca.

18 TIP WEB DESIGN DINAMIS / TIDAK STATIS PROSES CEPAT LAY OUT YANG BAGUS
MUDAH DIMENGERTI FRIENDLY MENARIK PERHATIAN USEFULLY UPDATE

19 PARADIGMA SISTEM INTERAKTIF
1. Time-Sharing Satu komputer yang mampu mendukung (dapat digunakan oleh) multiple user. Meningkatkan keluaran (throughput) dari sistem. 2. Video Display Units (VDU) Dapat memvisualisasikan dan memanipulasi informasi yang sama dalam representasi yang berbeda. Mampu memvisualisasikan abstraksi data.

20 PARADIGMA SISTEM INTERAKTIF(2)
3. Programming Toolkits (Alat Bantu Pemrograman) Alat Bantu Pemrograman memungkinkan programmer meningkatkan produktivitasnya. 4. Komputer Pribadi (Personal Computing) Mesin berukuran kecil yang powerful, yang dirancang untuk user tunggal.

21 PARADIGMA SISTEM INTERAKTIF(3)
5. Sistem Window dan interface WIMP (Windows, Icons, Menus and Pointers) Sistem window memungkinkan user untuk berdialog / berinteraksi dengan komputer dalam beberapa aktivitas/topik yang berbeda. 6. Metapora (Metaphor) Metapora telah cukup sukses digunakan untuk mengajari konsep baru, dimana konsep tersebut telah dipahami sebelumnya. Contoh metapora (dalam domain PC): ♦ Spreadsheeet adalah metapora dari Accounting dan Financial Modelling ♦ Keyboard adalah metapora dari Mesin Tik

22 PARADIGMA SISTEM INTERAKTIF(4)
7. Manipulasi Langsung (Direct Manipulation) Manipulasi Langsung memungkinkan user untuk mengubah keadaan internal sistem dengan cepat. Contoh Direct Manipulation adalah konsep WYSIWYG (what you see is what you get). 8. Bahasa vs. Aksi (Language versus Action) Bahasa digunakan oleh user untuk berkomunikasi dengan interface. Aksi dilakukan interface untuk melaksanakan perintah user.

23 PARADIGMA SISTEM INTERAKTIF(5)
9. Hypertext Penyimpanan informasi dalam format non-linear tidak banyak mendukung pengaksesan informasi secara random dan browsing asosiatif. Hypertext merupakan metode penyimpanan informasi dalam format non-linear yang memungkinkan akses atau browsing secara nonlinear atau random. 10. Multi-Modality Sistem multi-modal interaktif adalah sistem yang tergantung pada penggunaan beberapa (multiple) saluran (channel) komunikasi pada manusia. Contoh channel komunikasi pada manusia: visual(mata), haptic atau peraba (kulit) audio (telinga).

24 PARADIGMA SISTEM INTERAKTIF(6)
11. Computer-Supported Cooperative Work (CSCW) Perkembangan jaringan komputer memungkinkan komunikasi antara beberapa mesin (personal komputer) yang terpisah dalam satu kesatuan grup. Sistem CSCW dirancang untuk memungkinkan interaksi antar manusia melalui komputer dan direpresentasikan dalam satu produk. Contoh CSCW: (electronic mail)