desain arsitektur sistem · 2018-05-23 · (2) 2. membuat struktur desain antarmuka •desain...
TRANSCRIPT
![Page 1: Desain Arsitektur Sistem · 2018-05-23 · (2) 2. Membuat Struktur desain antarmuka •Desain struktur antarmuka mendefinisikan komponen dasar dari antarmuka dan bagaimana mereka](https://reader036.vdocuments.pub/reader036/viewer/2022081422/5f0255927e708231d403c226/html5/thumbnails/1.jpg)
DesainArsitektur
Sistem
Yudha Saintika, S.T., M.T.ICitra Wiguna, S.Kom., M.KomDwi Januarita AK, S.T., M.Kom
![Page 2: Desain Arsitektur Sistem · 2018-05-23 · (2) 2. Membuat Struktur desain antarmuka •Desain struktur antarmuka mendefinisikan komponen dasar dari antarmuka dan bagaimana mereka](https://reader036.vdocuments.pub/reader036/viewer/2022081422/5f0255927e708231d403c226/html5/thumbnails/2.jpg)
CapaianPembelajaran
○ Membuat Desain Arsitektur sebuah sistem dengan baik
![Page 3: Desain Arsitektur Sistem · 2018-05-23 · (2) 2. Membuat Struktur desain antarmuka •Desain struktur antarmuka mendefinisikan komponen dasar dari antarmuka dan bagaimana mereka](https://reader036.vdocuments.pub/reader036/viewer/2022081422/5f0255927e708231d403c226/html5/thumbnails/3.jpg)
DesainArsitektur
Tujuan dari desain arsitektur adalah
- untuk menentukan bagaimana komponenperangkat lunak dari sistem informasi akandialokasikan ke perangkat keras sistem
- agar bagian teknologi informasi memenuhikebutuhan-kebutuhan bisnis strategisorganisasi
![Page 4: Desain Arsitektur Sistem · 2018-05-23 · (2) 2. Membuat Struktur desain antarmuka •Desain struktur antarmuka mendefinisikan komponen dasar dari antarmuka dan bagaimana mereka](https://reader036.vdocuments.pub/reader036/viewer/2022081422/5f0255927e708231d403c226/html5/thumbnails/4.jpg)
Definisi Desain Arsitektur
○ Desain arsitektur adalah tahap pertama dalamproses desain perangkat lunak, kegiatan inimerupakan penghubung yang penting antaradesain dan analisis kebutuhan, sepertimengidentifikasi komponen struktural utamadalam sistem dan hubungan antara mereka.
○ Output dari proses desain arsitektur adalahmodel arsitektur yang menggambarkanbagaimana sistem ini disusun sebagai satu setkomponen untuk berkomunikasi.
4
Sommervilee
![Page 5: Desain Arsitektur Sistem · 2018-05-23 · (2) 2. Membuat Struktur desain antarmuka •Desain struktur antarmuka mendefinisikan komponen dasar dari antarmuka dan bagaimana mereka](https://reader036.vdocuments.pub/reader036/viewer/2022081422/5f0255927e708231d403c226/html5/thumbnails/5.jpg)
Keuntungan Desain arsitektur
○ Keuntungan merancang dan mendokumentasikan arsitektur perangkat lunak yaitu:
○ Komunikasi Stakeholder
○ Analisis Sistem
○ Penggunaan kembali perangkat lunak dalam skala besar
5
![Page 6: Desain Arsitektur Sistem · 2018-05-23 · (2) 2. Membuat Struktur desain antarmuka •Desain struktur antarmuka mendefinisikan komponen dasar dari antarmuka dan bagaimana mereka](https://reader036.vdocuments.pub/reader036/viewer/2022081422/5f0255927e708231d403c226/html5/thumbnails/6.jpg)
Komponen Utama Arsitektur Sistem
![Page 7: Desain Arsitektur Sistem · 2018-05-23 · (2) 2. Membuat Struktur desain antarmuka •Desain struktur antarmuka mendefinisikan komponen dasar dari antarmuka dan bagaimana mereka](https://reader036.vdocuments.pub/reader036/viewer/2022081422/5f0255927e708231d403c226/html5/thumbnails/7.jpg)
Komponen Utama Arsitektur Sistem
Software Hardware
![Page 8: Desain Arsitektur Sistem · 2018-05-23 · (2) 2. Membuat Struktur desain antarmuka •Desain struktur antarmuka mendefinisikan komponen dasar dari antarmuka dan bagaimana mereka](https://reader036.vdocuments.pub/reader036/viewer/2022081422/5f0255927e708231d403c226/html5/thumbnails/8.jpg)
Komponen Hardware Utamadari Sistem (1)
Clients Network Server
![Page 9: Desain Arsitektur Sistem · 2018-05-23 · (2) 2. Membuat Struktur desain antarmuka •Desain struktur antarmuka mendefinisikan komponen dasar dari antarmuka dan bagaimana mereka](https://reader036.vdocuments.pub/reader036/viewer/2022081422/5f0255927e708231d403c226/html5/thumbnails/9.jpg)
Komponen Hardware Utamadari Sistem (2)
• Clients Computer adalah perangkat yangdigunakan oleh pengguna dan biasanya berupakomputer desktop atau laptop, tetapi dapatjuga berupa perangkat genggam, smartphonedan lain sebagainya
• Server adalah komputer multi-user yang lebihbesar digunakan untuk menyimpan perangkatlunak dan data yang dapat diakses oleh siapasaja yang memiliki izin.
• Network adalah jaringan yang menghubungkansemua komponen
![Page 10: Desain Arsitektur Sistem · 2018-05-23 · (2) 2. Membuat Struktur desain antarmuka •Desain struktur antarmuka mendefinisikan komponen dasar dari antarmuka dan bagaimana mereka](https://reader036.vdocuments.pub/reader036/viewer/2022081422/5f0255927e708231d403c226/html5/thumbnails/10.jpg)
Jenis Arsitektur
Common Used
Client–Server Architectures
Terpusat
Tersebar
Advanced
Virtualization
Cloud Computing
![Page 11: Desain Arsitektur Sistem · 2018-05-23 · (2) 2. Membuat Struktur desain antarmuka •Desain struktur antarmuka mendefinisikan komponen dasar dari antarmuka dan bagaimana mereka](https://reader036.vdocuments.pub/reader036/viewer/2022081422/5f0255927e708231d403c226/html5/thumbnails/11.jpg)
Arsitektur Terpusat (1)
• 1960 / Mainframe
• Mainframe : komputer yang berukuran relatif besaryang ditunjuk untuk menangani data yangberukuran besar, dengan ribuan terminal untukmengakses data dengan tanggapan yang sangatcepat dan melibatkan jutaan transaksi
• Implementasinya adalah pemprosesan data yangterpusat (Biasa disebut komputansi terpusat).Dimana, semua pemrosesan data dilakukan olehkomputer yang ditempatkan di suatu lokasi yangditunjukan untuk melayani semua pemakai,Sedangkan komputer lain hanya berfungsi untukinput/output data saja.
• Biasanya digunakan oleh perusahaan yang tidakmemiliki cabang
![Page 12: Desain Arsitektur Sistem · 2018-05-23 · (2) 2. Membuat Struktur desain antarmuka •Desain struktur antarmuka mendefinisikan komponen dasar dari antarmuka dan bagaimana mereka](https://reader036.vdocuments.pub/reader036/viewer/2022081422/5f0255927e708231d403c226/html5/thumbnails/12.jpg)
Arsitektur Terpusat (2)
![Page 13: Desain Arsitektur Sistem · 2018-05-23 · (2) 2. Membuat Struktur desain antarmuka •Desain struktur antarmuka mendefinisikan komponen dasar dari antarmuka dan bagaimana mereka](https://reader036.vdocuments.pub/reader036/viewer/2022081422/5f0255927e708231d403c226/html5/thumbnails/13.jpg)
Keuntungan Kerugian
Instalasi lebih aman Jika 1 ada masalah maka semua akan
terkena dampaknya (kurang fleksibel)
Kontrol aman Sistem yang dibuat secara global, tidak
spesifik sesuai kebutuhan masing-
masing bagian
Biaya pemeliharaan murah Pemrosesan di mainframe lebih lama
(traffic padat)
Lebih mudah dalam membuat
perencanaan strategis
Jika ingin merubah subsistem maka
akan berdampak ke seluruh sistem
(kurang bisa di kustomisasi)Lebih mudah melakukan pelatihan
Hardware dan software sudah di
standarisasi sehingga lebih mudah
dalam pemeliharaan
Arsitektur Terpusat (3)
![Page 14: Desain Arsitektur Sistem · 2018-05-23 · (2) 2. Membuat Struktur desain antarmuka •Desain struktur antarmuka mendefinisikan komponen dasar dari antarmuka dan bagaimana mereka](https://reader036.vdocuments.pub/reader036/viewer/2022081422/5f0255927e708231d403c226/html5/thumbnails/14.jpg)
Arsitektur Tersebar / Terdistribusi (1)
• Pemrosesan data tersebar /terdistribusi
• Membagi sistem pemrosesan data ke subsistem yanglebih kecil, TETAPI pada hakikatnya masing-masingsubsistem tetap berlaku sebagai sistempemprosesan data terpusat.
• Terdiri atas sejumlah komputer yang tersebar padaberbagai lokasi
• Dihubungkan dengan sarana telekomunikasi
• Masing-masing komputer mampu melakukanpemrosesan yang serupa secara mandiri
• Bisa saling berinteraksi dalam pertukaran data
![Page 15: Desain Arsitektur Sistem · 2018-05-23 · (2) 2. Membuat Struktur desain antarmuka •Desain struktur antarmuka mendefinisikan komponen dasar dari antarmuka dan bagaimana mereka](https://reader036.vdocuments.pub/reader036/viewer/2022081422/5f0255927e708231d403c226/html5/thumbnails/15.jpg)
Arsitektur Tersebar / Terdistribusi (2)
• Misalnya sejumlah komputer yang terhubungmenggunakan arsitektur peer – to – peer
• Contoh penerapan arsitektur tersebar iniadalah arsitektur untuk perbankan, dimanasetiap kantor cabang memiliki pemrosesandata tersendiri, tetapi operasional banktersebut sistem pemrosesannya berupa sistempemrosesan data yang terdistribusi
![Page 16: Desain Arsitektur Sistem · 2018-05-23 · (2) 2. Membuat Struktur desain antarmuka •Desain struktur antarmuka mendefinisikan komponen dasar dari antarmuka dan bagaimana mereka](https://reader036.vdocuments.pub/reader036/viewer/2022081422/5f0255927e708231d403c226/html5/thumbnails/16.jpg)
Keuntungan Kerugian
Biaya pengembangan sistem lebih
hemat karena pembuatan sistem lebih
spesifik dalam kebutuhan bisnis
Dalam melakukan tugas akan terjadi
kemubadziran karena ketidak sesuaian
dalam menyediakan perangkat keras
dan lunak
Bagian sistem informasi lebih agresif
dalam menganalisis kebutuhan sistem.
Pengontrolan lebih sulit untuk dilakukan
dan dimungkinkan akan terjadi
kekacauanan dalam sistem komputer.
Bagian sistem informasi memiliki
tanggung jawab terhadap pengeluaran
biaya
Terkadang, ada duplikasi kegiatan dan
redundansi dalam pemeliharaan file
Kepuasan pemakai karena
pengembangan sistem informasi
berorientasi kepada end user.
Arsitektur Tersebar / Terdistribusi (3)
![Page 17: Desain Arsitektur Sistem · 2018-05-23 · (2) 2. Membuat Struktur desain antarmuka •Desain struktur antarmuka mendefinisikan komponen dasar dari antarmuka dan bagaimana mereka](https://reader036.vdocuments.pub/reader036/viewer/2022081422/5f0255927e708231d403c226/html5/thumbnails/17.jpg)
![Page 18: Desain Arsitektur Sistem · 2018-05-23 · (2) 2. Membuat Struktur desain antarmuka •Desain struktur antarmuka mendefinisikan komponen dasar dari antarmuka dan bagaimana mereka](https://reader036.vdocuments.pub/reader036/viewer/2022081422/5f0255927e708231d403c226/html5/thumbnails/18.jpg)
Client-Server Architecture (1)
○ Kebanyakan organisasi saat ini memanfaatkanarsitektur client-server
○ Dalam arsitektur ini, client bertanggung jawabuntuk level presentasi (aplikasi), sedangkanserver bertanggung jawab atas logika aksesdata dan data penyimpanan
![Page 19: Desain Arsitektur Sistem · 2018-05-23 · (2) 2. Membuat Struktur desain antarmuka •Desain struktur antarmuka mendefinisikan komponen dasar dari antarmuka dan bagaimana mereka](https://reader036.vdocuments.pub/reader036/viewer/2022081422/5f0255927e708231d403c226/html5/thumbnails/19.jpg)
Client-Server Architecture (2)
Benefits :
1. Scalable. Mudah untuk menambah atau mengurangi penyimpanan dan kemampuan server pengolahan
2. Untuk arsitektur client-server berukuran kecil yang menggunakan standar Internet, mudah memisahkanlogika presentasi, logika aplikasi, dan akses data logika dan desain masing-masing menjadiindependen.
3. Jika terdapat server yang down dalam arsitekturclient-server, hanya aplikasi membutuhkan server tersebut yang akan down.
![Page 20: Desain Arsitektur Sistem · 2018-05-23 · (2) 2. Membuat Struktur desain antarmuka •Desain struktur antarmuka mendefinisikan komponen dasar dari antarmuka dan bagaimana mereka](https://reader036.vdocuments.pub/reader036/viewer/2022081422/5f0255927e708231d403c226/html5/thumbnails/20.jpg)
Client–Server Tiers
Ada banyak cara di mana logika aplikasi dapatdipartisi antara client dan server
• 2 tiers
• 3 tiers
• N – tiers
Jenis arsitektur ini umum dalam sistem
e-commerce berbasis Web
![Page 21: Desain Arsitektur Sistem · 2018-05-23 · (2) 2. Membuat Struktur desain antarmuka •Desain struktur antarmuka mendefinisikan komponen dasar dari antarmuka dan bagaimana mereka](https://reader036.vdocuments.pub/reader036/viewer/2022081422/5f0255927e708231d403c226/html5/thumbnails/21.jpg)
○ 3 Tiers
![Page 22: Desain Arsitektur Sistem · 2018-05-23 · (2) 2. Membuat Struktur desain antarmuka •Desain struktur antarmuka mendefinisikan komponen dasar dari antarmuka dan bagaimana mereka](https://reader036.vdocuments.pub/reader036/viewer/2022081422/5f0255927e708231d403c226/html5/thumbnails/22.jpg)
○ N- Tiers
![Page 23: Desain Arsitektur Sistem · 2018-05-23 · (2) 2. Membuat Struktur desain antarmuka •Desain struktur antarmuka mendefinisikan komponen dasar dari antarmuka dan bagaimana mereka](https://reader036.vdocuments.pub/reader036/viewer/2022081422/5f0255927e708231d403c226/html5/thumbnails/23.jpg)
Advances in Architecture
Virtualization dan cloud computing saat inisedang mendapatkan perhatian yang cukup besar
![Page 24: Desain Arsitektur Sistem · 2018-05-23 · (2) 2. Membuat Struktur desain antarmuka •Desain struktur antarmuka mendefinisikan komponen dasar dari antarmuka dan bagaimana mereka](https://reader036.vdocuments.pub/reader036/viewer/2022081422/5f0255927e708231d403c226/html5/thumbnails/24.jpg)
Virtualization (1)
Konsep akses sebuah server fisik (hardware) kevirtual server. Digunakan software untuk membagiserver fisik ke beberapa lingkungan virtual atauoperating system (guest operation system) agardapat berbagi sebuah hardware.
![Page 25: Desain Arsitektur Sistem · 2018-05-23 · (2) 2. Membuat Struktur desain antarmuka •Desain struktur antarmuka mendefinisikan komponen dasar dari antarmuka dan bagaimana mereka](https://reader036.vdocuments.pub/reader036/viewer/2022081422/5f0255927e708231d403c226/html5/thumbnails/25.jpg)
Virtualization (2)
![Page 26: Desain Arsitektur Sistem · 2018-05-23 · (2) 2. Membuat Struktur desain antarmuka •Desain struktur antarmuka mendefinisikan komponen dasar dari antarmuka dan bagaimana mereka](https://reader036.vdocuments.pub/reader036/viewer/2022081422/5f0255927e708231d403c226/html5/thumbnails/26.jpg)
Contoh Implementasi Virtualisasi
26
![Page 27: Desain Arsitektur Sistem · 2018-05-23 · (2) 2. Membuat Struktur desain antarmuka •Desain struktur antarmuka mendefinisikan komponen dasar dari antarmuka dan bagaimana mereka](https://reader036.vdocuments.pub/reader036/viewer/2022081422/5f0255927e708231d403c226/html5/thumbnails/27.jpg)
Cloud Computing (1)
○ Saat ini organisasi tidak lagi perlu untukmemiliki dan mengelola infrastruktur merekasendiri
○ "Awan" di cloud computing dapat didefinisikansebagai kumpulan dari perangkat keras,jaringan, penyimpanan, layanan, dan interfaceyang tergabung untuk memberikan aspekkomputasi sebagai sebuah layanan.
![Page 28: Desain Arsitektur Sistem · 2018-05-23 · (2) 2. Membuat Struktur desain antarmuka •Desain struktur antarmuka mendefinisikan komponen dasar dari antarmuka dan bagaimana mereka](https://reader036.vdocuments.pub/reader036/viewer/2022081422/5f0255927e708231d403c226/html5/thumbnails/28.jpg)
Membuat Desain Arsitektur
• Desain arsitektur menentukan arsitekturkeseluruhan dan penempatan perangkat lunakdan keras yang akan digunakan
• Membuat desain arsitektur diawali denganpersyaratan nonfungsional
![Page 29: Desain Arsitektur Sistem · 2018-05-23 · (2) 2. Membuat Struktur desain antarmuka •Desain struktur antarmuka mendefinisikan komponen dasar dari antarmuka dan bagaimana mereka](https://reader036.vdocuments.pub/reader036/viewer/2022081422/5f0255927e708231d403c226/html5/thumbnails/29.jpg)
DesainAntarmuka
(User Interface Design)
Yudha Saintika, S.T., M.T.ICitra Wiguna, S.Kom., M.KomDwi Januarita AK, S.T., M.Kom
![Page 30: Desain Arsitektur Sistem · 2018-05-23 · (2) 2. Membuat Struktur desain antarmuka •Desain struktur antarmuka mendefinisikan komponen dasar dari antarmuka dan bagaimana mereka](https://reader036.vdocuments.pub/reader036/viewer/2022081422/5f0255927e708231d403c226/html5/thumbnails/30.jpg)
Capaian Pembelajaran
○ Membuat Desain Interface sistem dengan benar
![Page 31: Desain Arsitektur Sistem · 2018-05-23 · (2) 2. Membuat Struktur desain antarmuka •Desain struktur antarmuka mendefinisikan komponen dasar dari antarmuka dan bagaimana mereka](https://reader036.vdocuments.pub/reader036/viewer/2022081422/5f0255927e708231d403c226/html5/thumbnails/31.jpg)
Materi
○ Definisi desain antarmuka
○ Prinsip dasar desain antarmuka
![Page 32: Desain Arsitektur Sistem · 2018-05-23 · (2) 2. Membuat Struktur desain antarmuka •Desain struktur antarmuka mendefinisikan komponen dasar dari antarmuka dan bagaimana mereka](https://reader036.vdocuments.pub/reader036/viewer/2022081422/5f0255927e708231d403c226/html5/thumbnails/32.jpg)
Desain Antarmuka (1)
○ Desain antarmuka adalah prosesmendefinisikan bagaimana sistem akanberinteraksi dengan entitas eksternal(misalnya : pelanggan, pemasok, sistem lain)
○ Mendefinisikan cara di mana pengguna akanberinteraksi dengan sistem (bagaimanamemberikan input dan mendapat output sertabagaimana sistem menerima dan menjalankanperintah)
![Page 33: Desain Arsitektur Sistem · 2018-05-23 · (2) 2. Membuat Struktur desain antarmuka •Desain struktur antarmuka mendefinisikan komponen dasar dari antarmuka dan bagaimana mereka](https://reader036.vdocuments.pub/reader036/viewer/2022081422/5f0255927e708231d403c226/html5/thumbnails/33.jpg)
Desain Antarmuka (2)
![Page 34: Desain Arsitektur Sistem · 2018-05-23 · (2) 2. Membuat Struktur desain antarmuka •Desain struktur antarmuka mendefinisikan komponen dasar dari antarmuka dan bagaimana mereka](https://reader036.vdocuments.pub/reader036/viewer/2022081422/5f0255927e708231d403c226/html5/thumbnails/34.jpg)
User Interface Problems
○ Terlalu banyak menggunakan istilah komputer
○ Desain yang tidak jelas
○ Tidak mampu membedakan antara tindakan pilihan (“apa yang harus saya lakukan selanjutnya”)
○ Pendekatan pemecahan masalah yang tidak konsisten
○ Ketidakkonsistenan desain
![Page 35: Desain Arsitektur Sistem · 2018-05-23 · (2) 2. Membuat Struktur desain antarmuka •Desain struktur antarmuka mendefinisikan komponen dasar dari antarmuka dan bagaimana mereka](https://reader036.vdocuments.pub/reader036/viewer/2022081422/5f0255927e708231d403c226/html5/thumbnails/35.jpg)
Prinsip Desain Antarmuka (1)
Dari buku General Principles Of UI Design yang ditulis oleh Deborah J. Mayhew, ada 17 prinsipumum desain antarmuka.
1. User Compatibility (KompatibilitasPengguna)
2. Product Compatibility (KompatibilitasProduk)
3. Task Compatibility
4. Work Flow Compatibility
![Page 36: Desain Arsitektur Sistem · 2018-05-23 · (2) 2. Membuat Struktur desain antarmuka •Desain struktur antarmuka mendefinisikan komponen dasar dari antarmuka dan bagaimana mereka](https://reader036.vdocuments.pub/reader036/viewer/2022081422/5f0255927e708231d403c226/html5/thumbnails/36.jpg)
Prinsip Desain Antarmuka (2)
5. Consistency
6. Familiarity
7. Simplicity
8. Direct Manipulation
9. Control
10. WYSIWYG (What You See Is What You Get)
11. Flexibility
12. Responsiveness
![Page 37: Desain Arsitektur Sistem · 2018-05-23 · (2) 2. Membuat Struktur desain antarmuka •Desain struktur antarmuka mendefinisikan komponen dasar dari antarmuka dan bagaimana mereka](https://reader036.vdocuments.pub/reader036/viewer/2022081422/5f0255927e708231d403c226/html5/thumbnails/37.jpg)
Prinsip Desain Antarmuka (3)
13. Invisible Technology
14. Robustness
15. Protection
16. Ease of Learning
17. Ease of Use
![Page 38: Desain Arsitektur Sistem · 2018-05-23 · (2) 2. Membuat Struktur desain antarmuka •Desain struktur antarmuka mendefinisikan komponen dasar dari antarmuka dan bagaimana mereka](https://reader036.vdocuments.pub/reader036/viewer/2022081422/5f0255927e708231d403c226/html5/thumbnails/38.jpg)
1. User Compatibility (1)
![Page 39: Desain Arsitektur Sistem · 2018-05-23 · (2) 2. Membuat Struktur desain antarmuka •Desain struktur antarmuka mendefinisikan komponen dasar dari antarmuka dan bagaimana mereka](https://reader036.vdocuments.pub/reader036/viewer/2022081422/5f0255927e708231d403c226/html5/thumbnails/39.jpg)
1. User Compatibility (2)
○ Yaitu kesesuaian tampilan dengan tipikal dariuser, karena berbeda user bisa jadi kebutuhantampilannya berbeda.
○ Misalnya, jika aplikasi diperuntukkan bagianak-anak, maka jangan menggunakan istilahatau tampilan orang dewasa.
![Page 40: Desain Arsitektur Sistem · 2018-05-23 · (2) 2. Membuat Struktur desain antarmuka •Desain struktur antarmuka mendefinisikan komponen dasar dari antarmuka dan bagaimana mereka](https://reader036.vdocuments.pub/reader036/viewer/2022081422/5f0255927e708231d403c226/html5/thumbnails/40.jpg)
2. Product Compatibility
Produk aplikasi yang dihasilkan juga harus sesuai, memiliki tampilan yang sama/serupa, baik untukuser yang awam maupun ahli.
![Page 41: Desain Arsitektur Sistem · 2018-05-23 · (2) 2. Membuat Struktur desain antarmuka •Desain struktur antarmuka mendefinisikan komponen dasar dari antarmuka dan bagaimana mereka](https://reader036.vdocuments.pub/reader036/viewer/2022081422/5f0255927e708231d403c226/html5/thumbnails/41.jpg)
3. Task Compatibility
○ Fungsional dari task/tugas yang ada harussesuai dengan tampilannya.
○ Misal untuk pilihan report, orang akanlangsung mengartikan akan ditampilkanlaporan.
![Page 42: Desain Arsitektur Sistem · 2018-05-23 · (2) 2. Membuat Struktur desain antarmuka •Desain struktur antarmuka mendefinisikan komponen dasar dari antarmuka dan bagaimana mereka](https://reader036.vdocuments.pub/reader036/viewer/2022081422/5f0255927e708231d403c226/html5/thumbnails/42.jpg)
4. Work Flow Compatibility
• Aplikasi bisa berjalan dalam satu tampilanuntuk berbagai pekerjaan, denganpertimbangan tidak terlalu overload.
![Page 43: Desain Arsitektur Sistem · 2018-05-23 · (2) 2. Membuat Struktur desain antarmuka •Desain struktur antarmuka mendefinisikan komponen dasar dari antarmuka dan bagaimana mereka](https://reader036.vdocuments.pub/reader036/viewer/2022081422/5f0255927e708231d403c226/html5/thumbnails/43.jpg)
5. Consistency (1)
• Desain harus konsisten
• Contoh : Jika anda menggunakan istilah save yang berarti simpan, maka gunakan terus istilah tersebut
![Page 44: Desain Arsitektur Sistem · 2018-05-23 · (2) 2. Membuat Struktur desain antarmuka •Desain struktur antarmuka mendefinisikan komponen dasar dari antarmuka dan bagaimana mereka](https://reader036.vdocuments.pub/reader036/viewer/2022081422/5f0255927e708231d403c226/html5/thumbnails/44.jpg)
5. Consistency (2)
![Page 45: Desain Arsitektur Sistem · 2018-05-23 · (2) 2. Membuat Struktur desain antarmuka •Desain struktur antarmuka mendefinisikan komponen dasar dari antarmuka dan bagaimana mereka](https://reader036.vdocuments.pub/reader036/viewer/2022081422/5f0255927e708231d403c226/html5/thumbnails/45.jpg)
6. Familiarity
○ Faktor kebiasaan, mudah mengenali.
○ Icon disket akan lebih familiar jika digunakanuntuk perintah menyimpan.
![Page 46: Desain Arsitektur Sistem · 2018-05-23 · (2) 2. Membuat Struktur desain antarmuka •Desain struktur antarmuka mendefinisikan komponen dasar dari antarmuka dan bagaimana mereka](https://reader036.vdocuments.pub/reader036/viewer/2022081422/5f0255927e708231d403c226/html5/thumbnails/46.jpg)
Contoh Familiarity
46
![Page 47: Desain Arsitektur Sistem · 2018-05-23 · (2) 2. Membuat Struktur desain antarmuka •Desain struktur antarmuka mendefinisikan komponen dasar dari antarmuka dan bagaimana mereka](https://reader036.vdocuments.pub/reader036/viewer/2022081422/5f0255927e708231d403c226/html5/thumbnails/47.jpg)
7. Simplicity (Sederhana)
Aplikasi harus meringkas segala sesuatu yang adamenjadi lebih sederhana sekaligus bermaknaLogo IBM by Paul Rand
![Page 48: Desain Arsitektur Sistem · 2018-05-23 · (2) 2. Membuat Struktur desain antarmuka •Desain struktur antarmuka mendefinisikan komponen dasar dari antarmuka dan bagaimana mereka](https://reader036.vdocuments.pub/reader036/viewer/2022081422/5f0255927e708231d403c226/html5/thumbnails/48.jpg)
Bad Design
48
![Page 49: Desain Arsitektur Sistem · 2018-05-23 · (2) 2. Membuat Struktur desain antarmuka •Desain struktur antarmuka mendefinisikan komponen dasar dari antarmuka dan bagaimana mereka](https://reader036.vdocuments.pub/reader036/viewer/2022081422/5f0255927e708231d403c226/html5/thumbnails/49.jpg)
Bad Design
49
![Page 50: Desain Arsitektur Sistem · 2018-05-23 · (2) 2. Membuat Struktur desain antarmuka •Desain struktur antarmuka mendefinisikan komponen dasar dari antarmuka dan bagaimana mereka](https://reader036.vdocuments.pub/reader036/viewer/2022081422/5f0255927e708231d403c226/html5/thumbnails/50.jpg)
Good Design
50
![Page 51: Desain Arsitektur Sistem · 2018-05-23 · (2) 2. Membuat Struktur desain antarmuka •Desain struktur antarmuka mendefinisikan komponen dasar dari antarmuka dan bagaimana mereka](https://reader036.vdocuments.pub/reader036/viewer/2022081422/5f0255927e708231d403c226/html5/thumbnails/51.jpg)
8. Direct Manipulation
Penyajian langsung aktifitas kepada pengguna(user) sehingga aktifitas akan dikerjakan olehkomputer ketika pengguna memberikan instruksilangsung yang ada pada layar komputer.
Contoh : Untuk mempertebal huruf, cukup denganctrl+B.
![Page 52: Desain Arsitektur Sistem · 2018-05-23 · (2) 2. Membuat Struktur desain antarmuka •Desain struktur antarmuka mendefinisikan komponen dasar dari antarmuka dan bagaimana mereka](https://reader036.vdocuments.pub/reader036/viewer/2022081422/5f0255927e708231d403c226/html5/thumbnails/52.jpg)
9. Control
Berikan kontrol penuh pada user, tipikal user biasanya tidak mau terlalu banyak aturan
![Page 53: Desain Arsitektur Sistem · 2018-05-23 · (2) 2. Membuat Struktur desain antarmuka •Desain struktur antarmuka mendefinisikan komponen dasar dari antarmuka dan bagaimana mereka](https://reader036.vdocuments.pub/reader036/viewer/2022081422/5f0255927e708231d403c226/html5/thumbnails/53.jpg)
10. WYSIWYG (What You See Is What You Get)
○ Adanya korespondensi satu ke satu antarainformasi di layar dengan informasi di printed-output atau file.
○ Buatlah tampilan mirip seperti kehidupannyata user dan pastikan fungsionalitas yang ada berjalan sesuai tujuan.
○ Contoh : mengetik huruf A yang keluaran di layar adalah huruf A dan kemudian jika di Print ya Hasilnya juga Huruf A
![Page 54: Desain Arsitektur Sistem · 2018-05-23 · (2) 2. Membuat Struktur desain antarmuka •Desain struktur antarmuka mendefinisikan komponen dasar dari antarmuka dan bagaimana mereka](https://reader036.vdocuments.pub/reader036/viewer/2022081422/5f0255927e708231d403c226/html5/thumbnails/54.jpg)
11. Flexibility
sistem mempunyai kemampuan untuk mencapai suatu tujuan lewat sejumlah cara yang berbeda
sistem dapat menyesuaikan diri dengan keinginan pengguna (bukan pengguna yang harus menyesuaikan diri dengan kerangka perancang sistem)
![Page 55: Desain Arsitektur Sistem · 2018-05-23 · (2) 2. Membuat Struktur desain antarmuka •Desain struktur antarmuka mendefinisikan komponen dasar dari antarmuka dan bagaimana mereka](https://reader036.vdocuments.pub/reader036/viewer/2022081422/5f0255927e708231d403c226/html5/thumbnails/55.jpg)
Contoh Flexibility
55
![Page 56: Desain Arsitektur Sistem · 2018-05-23 · (2) 2. Membuat Struktur desain antarmuka •Desain struktur antarmuka mendefinisikan komponen dasar dari antarmuka dan bagaimana mereka](https://reader036.vdocuments.pub/reader036/viewer/2022081422/5f0255927e708231d403c226/html5/thumbnails/56.jpg)
12. Responsiveness
• Tampilan yang di buat harus ada responnya.
• Misalnya, tampilan please wait 68%… atauloading bar, dsb
![Page 57: Desain Arsitektur Sistem · 2018-05-23 · (2) 2. Membuat Struktur desain antarmuka •Desain struktur antarmuka mendefinisikan komponen dasar dari antarmuka dan bagaimana mereka](https://reader036.vdocuments.pub/reader036/viewer/2022081422/5f0255927e708231d403c226/html5/thumbnails/57.jpg)
13. Invisible Technology
○ User tidak penting mengetahui algoritma apayang digunakan.
○ Contohnya untuk mengurutkan penggunatidak perlu mengetahui algoritma yang digunakan programmer (max sort, bubble sort, quick sort, dst)
![Page 58: Desain Arsitektur Sistem · 2018-05-23 · (2) 2. Membuat Struktur desain antarmuka •Desain struktur antarmuka mendefinisikan komponen dasar dari antarmuka dan bagaimana mereka](https://reader036.vdocuments.pub/reader036/viewer/2022081422/5f0255927e708231d403c226/html5/thumbnails/58.jpg)
14. Robustness (Handal)
○ Dapat mengakomodir kesalahan user, janganmenunjukkan eror, apalagi crash.
○ Misalnya, pengguna salah menginputkanformat email, dapat diatasi dan diberikanfeedback
![Page 59: Desain Arsitektur Sistem · 2018-05-23 · (2) 2. Membuat Struktur desain antarmuka •Desain struktur antarmuka mendefinisikan komponen dasar dari antarmuka dan bagaimana mereka](https://reader036.vdocuments.pub/reader036/viewer/2022081422/5f0255927e708231d403c226/html5/thumbnails/59.jpg)
15. Protection
○ Melindungi user dari kesalahan yang umumdilakukan.
○ Misalnya, dengan memberikan fitur back atauundo.
![Page 60: Desain Arsitektur Sistem · 2018-05-23 · (2) 2. Membuat Struktur desain antarmuka •Desain struktur antarmuka mendefinisikan komponen dasar dari antarmuka dan bagaimana mereka](https://reader036.vdocuments.pub/reader036/viewer/2022081422/5f0255927e708231d403c226/html5/thumbnails/60.jpg)
16. Ease of Learning
○ Aplikasi mudah dipelajari bagi user novice (awam).
○ Hal ini akan memberikan motivasi kepada user tersebut untuk menggunakannya.
![Page 61: Desain Arsitektur Sistem · 2018-05-23 · (2) 2. Membuat Struktur desain antarmuka •Desain struktur antarmuka mendefinisikan komponen dasar dari antarmuka dan bagaimana mereka](https://reader036.vdocuments.pub/reader036/viewer/2022081422/5f0255927e708231d403c226/html5/thumbnails/61.jpg)
17. Ease of Use
Membuat sistem yang mudah digunakan untuk segala kategori pengguna (awam atau ahli)
![Page 62: Desain Arsitektur Sistem · 2018-05-23 · (2) 2. Membuat Struktur desain antarmuka •Desain struktur antarmuka mendefinisikan komponen dasar dari antarmuka dan bagaimana mereka](https://reader036.vdocuments.pub/reader036/viewer/2022081422/5f0255927e708231d403c226/html5/thumbnails/62.jpg)
Proses Desain Antarmuka (1)
1. Menggunakan User Scenario
![Page 63: Desain Arsitektur Sistem · 2018-05-23 · (2) 2. Membuat Struktur desain antarmuka •Desain struktur antarmuka mendefinisikan komponen dasar dari antarmuka dan bagaimana mereka](https://reader036.vdocuments.pub/reader036/viewer/2022081422/5f0255927e708231d403c226/html5/thumbnails/63.jpg)
![Page 64: Desain Arsitektur Sistem · 2018-05-23 · (2) 2. Membuat Struktur desain antarmuka •Desain struktur antarmuka mendefinisikan komponen dasar dari antarmuka dan bagaimana mereka](https://reader036.vdocuments.pub/reader036/viewer/2022081422/5f0255927e708231d403c226/html5/thumbnails/64.jpg)
Contoh
64
![Page 65: Desain Arsitektur Sistem · 2018-05-23 · (2) 2. Membuat Struktur desain antarmuka •Desain struktur antarmuka mendefinisikan komponen dasar dari antarmuka dan bagaimana mereka](https://reader036.vdocuments.pub/reader036/viewer/2022081422/5f0255927e708231d403c226/html5/thumbnails/65.jpg)
Contoh
65
![Page 66: Desain Arsitektur Sistem · 2018-05-23 · (2) 2. Membuat Struktur desain antarmuka •Desain struktur antarmuka mendefinisikan komponen dasar dari antarmuka dan bagaimana mereka](https://reader036.vdocuments.pub/reader036/viewer/2022081422/5f0255927e708231d403c226/html5/thumbnails/66.jpg)
Proses Desain Antarmuka (2)
2. Membuat Struktur desain antarmuka
• Desain struktur antarmuka mendefinisikankomponen dasar dari antarmuka dan bagaimanamereka bekerja sama untuk menyediakanfungsionalitas untuk pengguna.
• Diagram struktur antarmuka(ISD) digunakan untuk menunjukkan bagaimanasemua layar, bentuk, dan laporan yangdigunakan oleh sistem yang terkait danbagaimana pengguna bergerak dari satu ke yanglain
![Page 67: Desain Arsitektur Sistem · 2018-05-23 · (2) 2. Membuat Struktur desain antarmuka •Desain struktur antarmuka mendefinisikan komponen dasar dari antarmuka dan bagaimana mereka](https://reader036.vdocuments.pub/reader036/viewer/2022081422/5f0255927e708231d403c226/html5/thumbnails/67.jpg)
![Page 68: Desain Arsitektur Sistem · 2018-05-23 · (2) 2. Membuat Struktur desain antarmuka •Desain struktur antarmuka mendefinisikan komponen dasar dari antarmuka dan bagaimana mereka](https://reader036.vdocuments.pub/reader036/viewer/2022081422/5f0255927e708231d403c226/html5/thumbnails/68.jpg)
Proses Desain Antarmuka (3)
3. Membuat Prototype
4. Evaluasi
• Heuristic Evaluation : Membandingkandengan prinsip dasar UI
• Walk-through Evaluation : Meeting denganuser
• Usability Testing
![Page 69: Desain Arsitektur Sistem · 2018-05-23 · (2) 2. Membuat Struktur desain antarmuka •Desain struktur antarmuka mendefinisikan komponen dasar dari antarmuka dan bagaimana mereka](https://reader036.vdocuments.pub/reader036/viewer/2022081422/5f0255927e708231d403c226/html5/thumbnails/69.jpg)
Tugas Kelompok DPPL Tahap I
○ Buatlah draft DPPL yang memuat perancangan/desain arsitektur dari sistem dan perancangan antarmuka.
○ Format DPPL silakan mengikuti template yang sudah ada.
○ Tugas dikumpulkan paling lambat Hari Kamis, 24 Mei 2018, Pukul 23:59 dalam format PDF ke Email: [email protected]
69
![Page 70: Desain Arsitektur Sistem · 2018-05-23 · (2) 2. Membuat Struktur desain antarmuka •Desain struktur antarmuka mendefinisikan komponen dasar dari antarmuka dan bagaimana mereka](https://reader036.vdocuments.pub/reader036/viewer/2022081422/5f0255927e708231d403c226/html5/thumbnails/70.jpg)
Referensi
[1] Dennis, Alan., Barbara Halley Wixom and Roberta M. Roth.2012. System Analysis and Design 5th Edition. John Willey andSons, Inc. New Jersey
[2] Satzinger, John., Robert Jackson and Stephen Burd. 2010.System Analysis and Design in Changing World 5th Edition.Cengange Learning. Boston.
![Page 71: Desain Arsitektur Sistem · 2018-05-23 · (2) 2. Membuat Struktur desain antarmuka •Desain struktur antarmuka mendefinisikan komponen dasar dari antarmuka dan bagaimana mereka](https://reader036.vdocuments.pub/reader036/viewer/2022081422/5f0255927e708231d403c226/html5/thumbnails/71.jpg)