1 / 24

ANTAR MUKA INTERAKTIF

ANTAR MUKA INTERAKTIF. Oleh : Syukriya Al Asyik , S.kom. Strategi Pengembangan Antarmuka. sebuah program aplikasi terdiri atas dua bagian penting . 1. bagian antarmuka 2. bagian aplikasi. pengembangan bagian antarmuka perlu memperhatikan :.

leanna
Download Presentation

ANTAR MUKA INTERAKTIF

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. ANTAR MUKA INTERAKTIF Oleh: Syukriya Al Asyik, S.kom

  2. StrategiPengembanganAntarmuka • sebuah program aplikasiterdiriatasduabagianpenting. 1. bagianantarmuka 2. bagianaplikasi

  3. pengembanganbagianantarmukaperlumemperhatikan: • mekanismefungsimanusiasebagaipenggunakomputer • Berbagaiinformasi yang berhubungandengankarakteristik dialog yang cukuplebar, sepertiragam dialog, struktur, isitekstualdangrafis, tanggapanwaktu, dankecepatantampilan • Penggunaanprotitipeyandidasrkanpadaspesifikasi dialog formal yang disusunsecarabersama-samaantara (calon) penggunadanperancangsistem, sertaperanti yang mungkindapatdigunakanuntukmempercepatprosespembuatanprototipe

  4. pengembanganbagianantarmukaperlumemperhatikan (cont): • Teknikevaluasi yang digunakanuntukmengevaluasihasilprosesprototipe yang telahdilakukan, yaitusecaraanalitisberdsarkanpadaanalisisatastransaksi dialog, secaraempirikmenggunakanujicobapadasejumlahkasus,umpanbalikpengguna yang dapatdikerjakandengantanyajawabmaupunkuesioner, danbeberapaanalisis yang dikerjakanolehahliantarmuka.

  5. User Interface Design Tips and Techniques • 1. Konsistensi. • 2. Buatlahstandarisasi yang selaludipatuhidalamsegalahal. • 3. Jelaskan aturan yang dipakai. • 4. Beridukungan, baikuntukpemula (novice) ataupemakaimahir (expert). • 5. Kemudahannavigasidarilayarkelayarlainnya. • 6. Kemudahan navigasi pada suatu layar. • 7. Gunakan kata-kata yang jelas pada message dan label. • 8. Gunakankomponensesuaidenganfungsinya. • 9. Pelajari aplikasi lain yang sejenis. • 10. Gunakanwarnaseperlunya.

  6. User Interface Design Tips and Techniques (Cont..) • 11. Ikutiaturankekontrasanwarna. • 12. Gunakan font seperlunya. • 13. Gunakanfasilitas disable untukfasilitas yang tidakrelevan, jangandihilangkan. • 14. Gunakan tombol default yang tidak berbahaya / fatal. • 15. Gunakan field alignment. • 16. Justify data seperlunya. • 17. Janganmembuatlayar yang penuhinformasi. • 18. Buatlahpengelompokaninformasipadalayar. • 19. Tampilkan window yang akandiaktifkandilokasi yang sesuai. • 20. Janganhanyamenggantungkan functionality aplikasipada menu pop-up.

  7. Contoh:

  8. Contoh : WEB Design • Banner/ Logo Sebuah banner atau logo merupakantampilanawalpadasebuahhalaman web. Hal inimerupakansuatuidentitaskhususbagisitus web sehinggadapatmengingatkan audiens, sedang berada di situs web manakah mereka berada.

  9. WEB DESIGN • Statement of Purpose • Sebariskalimatpadatampilanawal web denganmaksuduntukmenjelaskanpertama kali kepadaaudiens, untukapadansiapasitus web tersebutditujukan.

  10. WEB DESIGN • Table of Content • Merupakantampilandaftarisipadasebuahhalaman web yang dimaksudkansebagaipetunjukinformasiapa yang akandilihatolehaudiens. • Sepertihalnyadaftarisipadasebuahbuku yang menunjukanletakhalamanpadasetiaptopik yang dimaksud.

  11. WEB DESIGN • Kickers • yaitusebuahkalimatpendekatausebuah image yang merupakangambarankepadaaudienskearahinformasiatauberita yang akandisampaikan. Merekatinggalmeng-klik, selanjutnyaakandihubungkanpadapokokberita yang dimaksud.

  12. WEB DESIGN • Artwork/Photographs • Tampilangambarataufoto yang menceritakanmaksuddariinformasi yang disampaikanpadahalaman web. • LAYOUT • Layout adalahmerupakantampilangambardantekspadasuatuhalaman web yang • tersusunsehinggaenakuntukdilihatdandibaca.

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

  14. PARADIGMA SISTEM INTERAKTIF 1. Time-Sharing • Satukomputer yang mampumendukung (dapatdigunakanoleh) multiple user. • Meningkatkankeluaran (throughput) darisistem. 2. Video Display Units (VDU) • Dapatmemvisualisasikandanmemanipulasiinformasi yang samadalamrepresentasi yang berbeda. • Mampumemvisualisasikanabstraksi data.

  15. PARADIGMA SISTEM INTERAKTIF(2) 3. Programming Toolkits (Alat Bantu Pemrograman) • Alat Bantu Pemrogramanmemungkinkan programmer meningkatkanproduktivitasnya. 4. KomputerPribadi (Personal Computing) • Mesinberukurankecil yang powerful, yang dirancanguntuk user tunggal.

  16. PARADIGMA SISTEM INTERAKTIF(3) 5. Sistem Window dan interface WIMP (Windows, Icons, Menus and Pointers) • Sistem window memungkinkan user untukberdialog / berinteraksidengankomputerdalambeberapaaktivitas/topik yang berbeda. 6. Metapora (Metaphor) • Metaporatelahcukupsuksesdigunakanuntukmengajarikonsepbaru, dimanakonseptersebuttelahdipahamisebelumnya. • Contohmetapora (dalam domain PC): ♦ Spreadsheeetadalahmetaporadari Accounting dan Financial Modelling ♦ Keyboard adalahmetaporadariMesinTik

  17. PARADIGMA SISTEM INTERAKTIF(4) 7. ManipulasiLangsung (Direct Manipulation) • ManipulasiLangsungmemungkinkan user untukmengubahkeadaan internal sistemdengancepat. • Contoh Direct Manipulation adalahkonsep WYSIWYG (what you see is what you get). 8. Bahasa vs. Aksi (Language versus Action) • Bahasadigunakanoleh user untukberkomunikasidengan interface. • Aksidilakukan interface untukmelaksanakanperintah user.

  18. PARADIGMA SISTEM INTERAKTIF(5) 9. Hypertext • Penyimpananinformasidalam format non-linear tidakbanyakmendukungpengaksesaninformasisecara random dan browsing asosiatif. • Hypertext merupakanmetodepenyimpananinformasidalam format non-linear yang memungkinkanaksesatau browsing secara nonlinear atau random. 10. Multi-Modality • Sistem multi-modal interaktifadalahsistem yang tergantungpadapenggunaanbeberapa (multiple) saluran (channel) komunikasipadamanusia. • Contoh channel komunikasipadamanusia: visual(mata), hapticatauperaba (kulit) audio (telinga).

  19. PARADIGMA SISTEM INTERAKTIF(6) 11. Computer-Supported Cooperative Work (CSCW) • Perkembanganjaringankomputermemungkinkankomunikasiantarabeberapamesin (personal komputer) yang terpisahdalamsatukesatuangrup. • Sistem CSCW dirancanguntukmemungkinkaninteraksiantarmanusiamelaluikomputerdandirepresentasikandalamsatuproduk. • Contoh CSCW: e-mail (electronic mail)

More Related