ANTAR MUKA INTERAKTIF

Oleh:Syukriya Al Asyik, S.kom

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

Strategi Pengembangan Antarmuka

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

pengembangan bagian antarmuka perlu memperhatikan:

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.

pengembangan bagian antarmuka perlu memperhatikan (cont):

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.

User Interface Design Tips and Techniques

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.

User Interface Design Tips and Techniques (Cont..)

Contoh:

Banner/ LogoSebuah 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.

Contoh : 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.

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.

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.

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.

WEB DESIGN

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

TIP WEB DESIGN

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.

PARADIGMA SISTEM INTERAKTIF

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.

PARADIGMA SISTEM INTERAKTIF(2)

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

PARADIGMA SISTEM INTERAKTIF(3)

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.

PARADIGMA SISTEM INTERAKTIF(4)

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

PARADIGMA SISTEM INTERAKTIF(5)

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: e-mail (electronic mail)

PARADIGMA SISTEM INTERAKTIF(6)