1 / 22

Perancangan Tampilan

Perancangan Tampilan. Cara Pendekatan. Program aplikasi , pada dasarnya dapat dikelompokkan ke dalam 2 kategori besar , yaitu Program aplikasi untuk keperluan khusus dengan pengguna yang khusus pula ( special purpose software )

selma
Download Presentation

Perancangan Tampilan

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

  2. Cara Pendekatan • Program aplikasi, padadasarnyadapatdikelompokkankedalam 2 kategoribesar, yaitu • Program aplikasiuntukkeperluankhususdenganpengguna yang khusus pula (special purpose software) • Program aplikasi yang akandigunakanolehbanyakpengguna (general purpose software) • Dari 2 kategoriiniperancang program dapatmenentukancarapendekatandalammerancangtampilan

  3. Cara Pendekatan (Lanjutan…) • Padakategoripertama, kelompokcalonpengguna yang akanmemanfaatkan program aplikasitersebutdapatdenganmudahdiperkirakan • Untukkelompokiniada 1 pendekatan yang dapatdilakukan, yaitudenganuser-centered design

  4. Cara Pendekatan (Lanjutan…) • Pendekatansecarauser-centered design adalahperancanganantarmuka yang melibatkanpengguna • Melibatkanpengguna:perancangdanpenggunadudukbersama-samauntukmerancangwajahantarmuka yang diinginkanpengguna • Dengancaraini, penggunaseolah-olehsudahmempunyaigambarannyatatentangantarmuka yang akanmerekagunakannanti

  5. Cara Pendekatan (Lanjutan…) • Padakategorikedua, perancangperlumenganggapbahwa program aplikasitersebutakandigunakanolehbebagaipenggunadenganberbagaitingkatankepandaian & karakteristik yang sangatberagam • Satukatakuncipentingdalampembuatanmodulantarmukauntuk program-program applikasipadakelompokiniadalahdenganmelakukancustomization

  6. Cara Pendekatan (Lanjutan…) • Customization memungkinkanpenggunadapatmenggunakan program aplikasidenganwajahantarmukanya yang sesuaidenganseleramasing-masingpengguna • Contoh:pengaturandekstoppada Microsoft Windows, denganadanyakemampuaninipenggunadapatmemilihsendiriwarnadekstop yang diinginkan, dll.

  7. PrinsipdanPetunjukPerancangan • Antarmukapenggunasecaraalamiahterbagimenjadi 4 komponen: • Model pengguna • BahasaPerintah • UmpanBalik • PenampilanInformasi

  8. PrinsipdanPetunjukPerancangan (Lanjutan…) • Model Pengguna • Model memungkinkanpenggunauntukmengembangkanpemahaman yang mendasartentangapa yang dikerjakanoleh program • Penggunadapatmengantisipasipengaruhsuatutindakan yang ialakukan & dapatmemilihcara yang cocokuntukmengoperasikan program tersebut • Model penggunadapatberupasuatusimulasitentangkeadaan yang sebenarnyadalamdunianyata

  9. PrinsipdanPetunjukPerancangan (Lanjutan…) • BahasaPerintah • Setelahpenggunamengetahuidanmemahami model yang diinginkan, penggunaperluperantiuntukmemanipulasi model (bahasaperintah) • Idealnya, program komputermempunyaibahasaperintah yang alami, sehingga model penggunadengancepatdapatmengoperasikannya

  10. PrinsipdanPetunjukPerancangan (Lanjutan…) • UmpanBalik • Umpanbalik kemampuansuatu program yang membantupenggunauntukmengoperasikan program itusendiri • Umpanbalikdapatberbentuk: pesan-pesanpenjelasan, pesanpenerimaanperintah, indikasiadanyaobjekterpilih, pesankesalanbilaterjadi, dll • Umpanbalikdigunakanuntukmemberikeyakinanbahwa program telahmenerimaperintahpengguna

  11. PrinsipdanPetunjukPerancangan (Lanjutan…) • TampilanInformasi • Komponeninidigunakanuntukmenunjukkan status informasiatau program ketikapenggunamelakukansuatutindakan • Padabagianiniperancangharusmenampilkanpesan-pesantersebutseefektifmungkin, sehinggamudahdipahamiolehpengguna

  12. UrutanPerancangan • PemilihanRagam Dialog • PerancanganStruktur Dialog  model pengguna • Perancangan format pesan • Perancanganpenanganankesalahan • PerancanganStruktur Data

  13. PerancanganTampilanBerbasisTeks • Padaperancangantampilanuntukantarmukaberbasisteks, ada 6 faktor yang harusdipertimbangkan agar diperolehtataletaktampilan yang berkualitastinggi • 6 faktortersebut: • UrutanPenyajian • Kelonggaran (Spaciousness) • Pengelompokan • Relevansi • Konsistensi • Kesederhanaan

  14. Contoh Tata LetakTekstual

  15. PerancanganTampilanBerbasisGrafis • Ada 5 faktor yang perludiperhatikanpadasaatmerancangantarmukabebasisgrafis, yaitu: • Ilusipadaobjek-objek yang akandimanipulasi • Urutan visual danfokuspengguna • Struktur internal • Kosakatagrafis yang konsistendansesuai • Kesesuaiandengan media

  16. Peranti Bantu Sederhana • Perancangseharusnyamembuatdokumentasiakanbentuk-bentuk yang akandiimplentasikan • Peranti bantu menggunakansembarangkertaskosong • Untukmempermudahpenamaan, makalembarkertas yang dimaksuddiberinamadenganlembarkerjatampilan (screen design work sheet) untukseterusnyadisingkat LKT

  17. Peranti Bantu Sederhana (Lanjutan…) Contohlembarkerjatampilan (LKT)

  18. Peranti Bantu Sederhana (Lanjutan…) • LKT diataspadadasarnyaterdiriatas 4 bagian, yaitu: • NomorLembarKerja • BagianTampilan: berisisketsatampilan yang akanmunculdilayar • Bagian Navigator: bagianiniantara lain menjelaskankapantampilanituakanmuncul, dankapantampilanituberupahmenjaditampilan lain. • BagianKeterangan: bagianiniberisipenjelasansingkattentangatributtampilan yang akandipakai

  19. Peranti Bantu Sederhana (Lanjutan…) ContohPerancanganTampilan

  20. JaringanSemantikTampilan • Agar pemrogramtidakperlumembolak-baliklembarkerjapadasaatmenuliskan program untukdisesuaikandengannavigasipadasetiaplembarkerja • Akanlebihmudahbagipemrogramuntukmemeriksanavigasi yang adadenganmenggambarkannyalewatsuatubaganyagdisebutjaringansemantiktampilan (screen semantic net)

  21. JaringanSemantikTampilan (Tampilan) • T1, T2,…,T7 adalahhnomortampilan (LembarKerja) • Tulisan Alt-S, Exit, Esc, dlladalah event • Anakpanahmenunjukkantransisi

  22. JaringanSemantikTampilan (Tampilan) • Contoh : • Jikapenggunasedangberadaditampilan T5, dankemudianiamenekantombol Alt-Q (ada event penekananpapanketik), makatampilanakanberubahmenjadi T7 • JikaiamenekantomboltekanSelesai, makaakankembaliketampilan T1

More Related