Desain Arsitektur Sistemyudha.dosen.ittelkom-pwt.ac.id/wp-content/uploads/sites/73/2018/02/... ·...
Transcript of Desain Arsitektur Sistemyudha.dosen.ittelkom-pwt.ac.id/wp-content/uploads/sites/73/2018/02/... ·...
![Page 1: Desain Arsitektur Sistemyudha.dosen.ittelkom-pwt.ac.id/wp-content/uploads/sites/73/2018/02/... · mengakses data dengan ... Contohnya untuk mengurutkan pengguna tidak perlu mengetahui](https://reader036.fdokumen.com/reader036/viewer/2022081416/5c7b5b7509d3f246358bdc26/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 Sistemyudha.dosen.ittelkom-pwt.ac.id/wp-content/uploads/sites/73/2018/02/... · mengakses data dengan ... Contohnya untuk mengurutkan pengguna tidak perlu mengetahui](https://reader036.fdokumen.com/reader036/viewer/2022081416/5c7b5b7509d3f246358bdc26/html5/thumbnails/2.jpg)
CapaianPembelajaran
○ Membuat Desain Arsitektur sebuah sistem dengan baik
![Page 3: Desain Arsitektur Sistemyudha.dosen.ittelkom-pwt.ac.id/wp-content/uploads/sites/73/2018/02/... · mengakses data dengan ... Contohnya untuk mengurutkan pengguna tidak perlu mengetahui](https://reader036.fdokumen.com/reader036/viewer/2022081416/5c7b5b7509d3f246358bdc26/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 Sistemyudha.dosen.ittelkom-pwt.ac.id/wp-content/uploads/sites/73/2018/02/... · mengakses data dengan ... Contohnya untuk mengurutkan pengguna tidak perlu mengetahui](https://reader036.fdokumen.com/reader036/viewer/2022081416/5c7b5b7509d3f246358bdc26/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 Sistemyudha.dosen.ittelkom-pwt.ac.id/wp-content/uploads/sites/73/2018/02/... · mengakses data dengan ... Contohnya untuk mengurutkan pengguna tidak perlu mengetahui](https://reader036.fdokumen.com/reader036/viewer/2022081416/5c7b5b7509d3f246358bdc26/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 Sistemyudha.dosen.ittelkom-pwt.ac.id/wp-content/uploads/sites/73/2018/02/... · mengakses data dengan ... Contohnya untuk mengurutkan pengguna tidak perlu mengetahui](https://reader036.fdokumen.com/reader036/viewer/2022081416/5c7b5b7509d3f246358bdc26/html5/thumbnails/6.jpg)
Komponen Utama Arsitektur Sistem
![Page 7: Desain Arsitektur Sistemyudha.dosen.ittelkom-pwt.ac.id/wp-content/uploads/sites/73/2018/02/... · mengakses data dengan ... Contohnya untuk mengurutkan pengguna tidak perlu mengetahui](https://reader036.fdokumen.com/reader036/viewer/2022081416/5c7b5b7509d3f246358bdc26/html5/thumbnails/7.jpg)
Komponen Utama Arsitektur Sistem
Software Hardware
![Page 8: Desain Arsitektur Sistemyudha.dosen.ittelkom-pwt.ac.id/wp-content/uploads/sites/73/2018/02/... · mengakses data dengan ... Contohnya untuk mengurutkan pengguna tidak perlu mengetahui](https://reader036.fdokumen.com/reader036/viewer/2022081416/5c7b5b7509d3f246358bdc26/html5/thumbnails/8.jpg)
Komponen Hardware Utamadari Sistem (1)
Clients Network Server
![Page 9: Desain Arsitektur Sistemyudha.dosen.ittelkom-pwt.ac.id/wp-content/uploads/sites/73/2018/02/... · mengakses data dengan ... Contohnya untuk mengurutkan pengguna tidak perlu mengetahui](https://reader036.fdokumen.com/reader036/viewer/2022081416/5c7b5b7509d3f246358bdc26/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 Sistemyudha.dosen.ittelkom-pwt.ac.id/wp-content/uploads/sites/73/2018/02/... · mengakses data dengan ... Contohnya untuk mengurutkan pengguna tidak perlu mengetahui](https://reader036.fdokumen.com/reader036/viewer/2022081416/5c7b5b7509d3f246358bdc26/html5/thumbnails/10.jpg)
Jenis Arsitektur
Common Used
Client–Server Architectures
Terpusat
Tersebar
Advanced
Virtualization
Cloud Computing
![Page 11: Desain Arsitektur Sistemyudha.dosen.ittelkom-pwt.ac.id/wp-content/uploads/sites/73/2018/02/... · mengakses data dengan ... Contohnya untuk mengurutkan pengguna tidak perlu mengetahui](https://reader036.fdokumen.com/reader036/viewer/2022081416/5c7b5b7509d3f246358bdc26/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 Sistemyudha.dosen.ittelkom-pwt.ac.id/wp-content/uploads/sites/73/2018/02/... · mengakses data dengan ... Contohnya untuk mengurutkan pengguna tidak perlu mengetahui](https://reader036.fdokumen.com/reader036/viewer/2022081416/5c7b5b7509d3f246358bdc26/html5/thumbnails/12.jpg)
Arsitektur Terpusat (2)
![Page 13: Desain Arsitektur Sistemyudha.dosen.ittelkom-pwt.ac.id/wp-content/uploads/sites/73/2018/02/... · mengakses data dengan ... Contohnya untuk mengurutkan pengguna tidak perlu mengetahui](https://reader036.fdokumen.com/reader036/viewer/2022081416/5c7b5b7509d3f246358bdc26/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 Sistemyudha.dosen.ittelkom-pwt.ac.id/wp-content/uploads/sites/73/2018/02/... · mengakses data dengan ... Contohnya untuk mengurutkan pengguna tidak perlu mengetahui](https://reader036.fdokumen.com/reader036/viewer/2022081416/5c7b5b7509d3f246358bdc26/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 Sistemyudha.dosen.ittelkom-pwt.ac.id/wp-content/uploads/sites/73/2018/02/... · mengakses data dengan ... Contohnya untuk mengurutkan pengguna tidak perlu mengetahui](https://reader036.fdokumen.com/reader036/viewer/2022081416/5c7b5b7509d3f246358bdc26/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 Sistemyudha.dosen.ittelkom-pwt.ac.id/wp-content/uploads/sites/73/2018/02/... · mengakses data dengan ... Contohnya untuk mengurutkan pengguna tidak perlu mengetahui](https://reader036.fdokumen.com/reader036/viewer/2022081416/5c7b5b7509d3f246358bdc26/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 Sistemyudha.dosen.ittelkom-pwt.ac.id/wp-content/uploads/sites/73/2018/02/... · mengakses data dengan ... Contohnya untuk mengurutkan pengguna tidak perlu mengetahui](https://reader036.fdokumen.com/reader036/viewer/2022081416/5c7b5b7509d3f246358bdc26/html5/thumbnails/17.jpg)
![Page 18: Desain Arsitektur Sistemyudha.dosen.ittelkom-pwt.ac.id/wp-content/uploads/sites/73/2018/02/... · mengakses data dengan ... Contohnya untuk mengurutkan pengguna tidak perlu mengetahui](https://reader036.fdokumen.com/reader036/viewer/2022081416/5c7b5b7509d3f246358bdc26/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 Sistemyudha.dosen.ittelkom-pwt.ac.id/wp-content/uploads/sites/73/2018/02/... · mengakses data dengan ... Contohnya untuk mengurutkan pengguna tidak perlu mengetahui](https://reader036.fdokumen.com/reader036/viewer/2022081416/5c7b5b7509d3f246358bdc26/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 Sistemyudha.dosen.ittelkom-pwt.ac.id/wp-content/uploads/sites/73/2018/02/... · mengakses data dengan ... Contohnya untuk mengurutkan pengguna tidak perlu mengetahui](https://reader036.fdokumen.com/reader036/viewer/2022081416/5c7b5b7509d3f246358bdc26/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 Sistemyudha.dosen.ittelkom-pwt.ac.id/wp-content/uploads/sites/73/2018/02/... · mengakses data dengan ... Contohnya untuk mengurutkan pengguna tidak perlu mengetahui](https://reader036.fdokumen.com/reader036/viewer/2022081416/5c7b5b7509d3f246358bdc26/html5/thumbnails/21.jpg)
○ 3 Tiers
![Page 22: Desain Arsitektur Sistemyudha.dosen.ittelkom-pwt.ac.id/wp-content/uploads/sites/73/2018/02/... · mengakses data dengan ... Contohnya untuk mengurutkan pengguna tidak perlu mengetahui](https://reader036.fdokumen.com/reader036/viewer/2022081416/5c7b5b7509d3f246358bdc26/html5/thumbnails/22.jpg)
○ N- Tiers
![Page 23: Desain Arsitektur Sistemyudha.dosen.ittelkom-pwt.ac.id/wp-content/uploads/sites/73/2018/02/... · mengakses data dengan ... Contohnya untuk mengurutkan pengguna tidak perlu mengetahui](https://reader036.fdokumen.com/reader036/viewer/2022081416/5c7b5b7509d3f246358bdc26/html5/thumbnails/23.jpg)
Advances in Architecture
Virtualization dan cloud computing saat inisedang mendapatkan perhatian yang cukup besar
![Page 24: Desain Arsitektur Sistemyudha.dosen.ittelkom-pwt.ac.id/wp-content/uploads/sites/73/2018/02/... · mengakses data dengan ... Contohnya untuk mengurutkan pengguna tidak perlu mengetahui](https://reader036.fdokumen.com/reader036/viewer/2022081416/5c7b5b7509d3f246358bdc26/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 Sistemyudha.dosen.ittelkom-pwt.ac.id/wp-content/uploads/sites/73/2018/02/... · mengakses data dengan ... Contohnya untuk mengurutkan pengguna tidak perlu mengetahui](https://reader036.fdokumen.com/reader036/viewer/2022081416/5c7b5b7509d3f246358bdc26/html5/thumbnails/25.jpg)
Virtualization (2)
![Page 26: Desain Arsitektur Sistemyudha.dosen.ittelkom-pwt.ac.id/wp-content/uploads/sites/73/2018/02/... · mengakses data dengan ... Contohnya untuk mengurutkan pengguna tidak perlu mengetahui](https://reader036.fdokumen.com/reader036/viewer/2022081416/5c7b5b7509d3f246358bdc26/html5/thumbnails/26.jpg)
Contoh Implementasi Virtualisasi
26
![Page 27: Desain Arsitektur Sistemyudha.dosen.ittelkom-pwt.ac.id/wp-content/uploads/sites/73/2018/02/... · mengakses data dengan ... Contohnya untuk mengurutkan pengguna tidak perlu mengetahui](https://reader036.fdokumen.com/reader036/viewer/2022081416/5c7b5b7509d3f246358bdc26/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 Sistemyudha.dosen.ittelkom-pwt.ac.id/wp-content/uploads/sites/73/2018/02/... · mengakses data dengan ... Contohnya untuk mengurutkan pengguna tidak perlu mengetahui](https://reader036.fdokumen.com/reader036/viewer/2022081416/5c7b5b7509d3f246358bdc26/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 Sistemyudha.dosen.ittelkom-pwt.ac.id/wp-content/uploads/sites/73/2018/02/... · mengakses data dengan ... Contohnya untuk mengurutkan pengguna tidak perlu mengetahui](https://reader036.fdokumen.com/reader036/viewer/2022081416/5c7b5b7509d3f246358bdc26/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 Sistemyudha.dosen.ittelkom-pwt.ac.id/wp-content/uploads/sites/73/2018/02/... · mengakses data dengan ... Contohnya untuk mengurutkan pengguna tidak perlu mengetahui](https://reader036.fdokumen.com/reader036/viewer/2022081416/5c7b5b7509d3f246358bdc26/html5/thumbnails/30.jpg)
Capaian Pembelajaran
○ Membuat Desain Interface sistem dengan benar
![Page 31: Desain Arsitektur Sistemyudha.dosen.ittelkom-pwt.ac.id/wp-content/uploads/sites/73/2018/02/... · mengakses data dengan ... Contohnya untuk mengurutkan pengguna tidak perlu mengetahui](https://reader036.fdokumen.com/reader036/viewer/2022081416/5c7b5b7509d3f246358bdc26/html5/thumbnails/31.jpg)
Materi
○ Definisi desain antarmuka
○ Prinsip dasar desain antarmuka
![Page 32: Desain Arsitektur Sistemyudha.dosen.ittelkom-pwt.ac.id/wp-content/uploads/sites/73/2018/02/... · mengakses data dengan ... Contohnya untuk mengurutkan pengguna tidak perlu mengetahui](https://reader036.fdokumen.com/reader036/viewer/2022081416/5c7b5b7509d3f246358bdc26/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 Sistemyudha.dosen.ittelkom-pwt.ac.id/wp-content/uploads/sites/73/2018/02/... · mengakses data dengan ... Contohnya untuk mengurutkan pengguna tidak perlu mengetahui](https://reader036.fdokumen.com/reader036/viewer/2022081416/5c7b5b7509d3f246358bdc26/html5/thumbnails/33.jpg)
Desain Antarmuka (2)
![Page 34: Desain Arsitektur Sistemyudha.dosen.ittelkom-pwt.ac.id/wp-content/uploads/sites/73/2018/02/... · mengakses data dengan ... Contohnya untuk mengurutkan pengguna tidak perlu mengetahui](https://reader036.fdokumen.com/reader036/viewer/2022081416/5c7b5b7509d3f246358bdc26/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 Sistemyudha.dosen.ittelkom-pwt.ac.id/wp-content/uploads/sites/73/2018/02/... · mengakses data dengan ... Contohnya untuk mengurutkan pengguna tidak perlu mengetahui](https://reader036.fdokumen.com/reader036/viewer/2022081416/5c7b5b7509d3f246358bdc26/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 Sistemyudha.dosen.ittelkom-pwt.ac.id/wp-content/uploads/sites/73/2018/02/... · mengakses data dengan ... Contohnya untuk mengurutkan pengguna tidak perlu mengetahui](https://reader036.fdokumen.com/reader036/viewer/2022081416/5c7b5b7509d3f246358bdc26/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 Sistemyudha.dosen.ittelkom-pwt.ac.id/wp-content/uploads/sites/73/2018/02/... · mengakses data dengan ... Contohnya untuk mengurutkan pengguna tidak perlu mengetahui](https://reader036.fdokumen.com/reader036/viewer/2022081416/5c7b5b7509d3f246358bdc26/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 Sistemyudha.dosen.ittelkom-pwt.ac.id/wp-content/uploads/sites/73/2018/02/... · mengakses data dengan ... Contohnya untuk mengurutkan pengguna tidak perlu mengetahui](https://reader036.fdokumen.com/reader036/viewer/2022081416/5c7b5b7509d3f246358bdc26/html5/thumbnails/38.jpg)
1. User Compatibility (1)
![Page 39: Desain Arsitektur Sistemyudha.dosen.ittelkom-pwt.ac.id/wp-content/uploads/sites/73/2018/02/... · mengakses data dengan ... Contohnya untuk mengurutkan pengguna tidak perlu mengetahui](https://reader036.fdokumen.com/reader036/viewer/2022081416/5c7b5b7509d3f246358bdc26/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 Sistemyudha.dosen.ittelkom-pwt.ac.id/wp-content/uploads/sites/73/2018/02/... · mengakses data dengan ... Contohnya untuk mengurutkan pengguna tidak perlu mengetahui](https://reader036.fdokumen.com/reader036/viewer/2022081416/5c7b5b7509d3f246358bdc26/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 Sistemyudha.dosen.ittelkom-pwt.ac.id/wp-content/uploads/sites/73/2018/02/... · mengakses data dengan ... Contohnya untuk mengurutkan pengguna tidak perlu mengetahui](https://reader036.fdokumen.com/reader036/viewer/2022081416/5c7b5b7509d3f246358bdc26/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 Sistemyudha.dosen.ittelkom-pwt.ac.id/wp-content/uploads/sites/73/2018/02/... · mengakses data dengan ... Contohnya untuk mengurutkan pengguna tidak perlu mengetahui](https://reader036.fdokumen.com/reader036/viewer/2022081416/5c7b5b7509d3f246358bdc26/html5/thumbnails/42.jpg)
4. Work Flow Compatibility
• Aplikasi bisa berjalan dalam satu tampilanuntuk berbagai pekerjaan, denganpertimbangan tidak terlalu overload.
![Page 43: Desain Arsitektur Sistemyudha.dosen.ittelkom-pwt.ac.id/wp-content/uploads/sites/73/2018/02/... · mengakses data dengan ... Contohnya untuk mengurutkan pengguna tidak perlu mengetahui](https://reader036.fdokumen.com/reader036/viewer/2022081416/5c7b5b7509d3f246358bdc26/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 Sistemyudha.dosen.ittelkom-pwt.ac.id/wp-content/uploads/sites/73/2018/02/... · mengakses data dengan ... Contohnya untuk mengurutkan pengguna tidak perlu mengetahui](https://reader036.fdokumen.com/reader036/viewer/2022081416/5c7b5b7509d3f246358bdc26/html5/thumbnails/44.jpg)
5. Consistency (2)
![Page 45: Desain Arsitektur Sistemyudha.dosen.ittelkom-pwt.ac.id/wp-content/uploads/sites/73/2018/02/... · mengakses data dengan ... Contohnya untuk mengurutkan pengguna tidak perlu mengetahui](https://reader036.fdokumen.com/reader036/viewer/2022081416/5c7b5b7509d3f246358bdc26/html5/thumbnails/45.jpg)
6. Familiarity
○ Faktor kebiasaan, mudah mengenali.
○ Icon disket akan lebih familiar jika digunakanuntuk perintah menyimpan.
![Page 46: Desain Arsitektur Sistemyudha.dosen.ittelkom-pwt.ac.id/wp-content/uploads/sites/73/2018/02/... · mengakses data dengan ... Contohnya untuk mengurutkan pengguna tidak perlu mengetahui](https://reader036.fdokumen.com/reader036/viewer/2022081416/5c7b5b7509d3f246358bdc26/html5/thumbnails/46.jpg)
Contoh Familiarity
46
![Page 47: Desain Arsitektur Sistemyudha.dosen.ittelkom-pwt.ac.id/wp-content/uploads/sites/73/2018/02/... · mengakses data dengan ... Contohnya untuk mengurutkan pengguna tidak perlu mengetahui](https://reader036.fdokumen.com/reader036/viewer/2022081416/5c7b5b7509d3f246358bdc26/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 Sistemyudha.dosen.ittelkom-pwt.ac.id/wp-content/uploads/sites/73/2018/02/... · mengakses data dengan ... Contohnya untuk mengurutkan pengguna tidak perlu mengetahui](https://reader036.fdokumen.com/reader036/viewer/2022081416/5c7b5b7509d3f246358bdc26/html5/thumbnails/48.jpg)
Bad Design
48
![Page 49: Desain Arsitektur Sistemyudha.dosen.ittelkom-pwt.ac.id/wp-content/uploads/sites/73/2018/02/... · mengakses data dengan ... Contohnya untuk mengurutkan pengguna tidak perlu mengetahui](https://reader036.fdokumen.com/reader036/viewer/2022081416/5c7b5b7509d3f246358bdc26/html5/thumbnails/49.jpg)
Bad Design
49
![Page 50: Desain Arsitektur Sistemyudha.dosen.ittelkom-pwt.ac.id/wp-content/uploads/sites/73/2018/02/... · mengakses data dengan ... Contohnya untuk mengurutkan pengguna tidak perlu mengetahui](https://reader036.fdokumen.com/reader036/viewer/2022081416/5c7b5b7509d3f246358bdc26/html5/thumbnails/50.jpg)
Good Design
50
![Page 51: Desain Arsitektur Sistemyudha.dosen.ittelkom-pwt.ac.id/wp-content/uploads/sites/73/2018/02/... · mengakses data dengan ... Contohnya untuk mengurutkan pengguna tidak perlu mengetahui](https://reader036.fdokumen.com/reader036/viewer/2022081416/5c7b5b7509d3f246358bdc26/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 Sistemyudha.dosen.ittelkom-pwt.ac.id/wp-content/uploads/sites/73/2018/02/... · mengakses data dengan ... Contohnya untuk mengurutkan pengguna tidak perlu mengetahui](https://reader036.fdokumen.com/reader036/viewer/2022081416/5c7b5b7509d3f246358bdc26/html5/thumbnails/52.jpg)
9. Control
Berikan kontrol penuh pada user, tipikal user biasanya tidak mau terlalu banyak aturan
![Page 53: Desain Arsitektur Sistemyudha.dosen.ittelkom-pwt.ac.id/wp-content/uploads/sites/73/2018/02/... · mengakses data dengan ... Contohnya untuk mengurutkan pengguna tidak perlu mengetahui](https://reader036.fdokumen.com/reader036/viewer/2022081416/5c7b5b7509d3f246358bdc26/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 Sistemyudha.dosen.ittelkom-pwt.ac.id/wp-content/uploads/sites/73/2018/02/... · mengakses data dengan ... Contohnya untuk mengurutkan pengguna tidak perlu mengetahui](https://reader036.fdokumen.com/reader036/viewer/2022081416/5c7b5b7509d3f246358bdc26/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 Sistemyudha.dosen.ittelkom-pwt.ac.id/wp-content/uploads/sites/73/2018/02/... · mengakses data dengan ... Contohnya untuk mengurutkan pengguna tidak perlu mengetahui](https://reader036.fdokumen.com/reader036/viewer/2022081416/5c7b5b7509d3f246358bdc26/html5/thumbnails/55.jpg)
Contoh Flexibility
55
![Page 56: Desain Arsitektur Sistemyudha.dosen.ittelkom-pwt.ac.id/wp-content/uploads/sites/73/2018/02/... · mengakses data dengan ... Contohnya untuk mengurutkan pengguna tidak perlu mengetahui](https://reader036.fdokumen.com/reader036/viewer/2022081416/5c7b5b7509d3f246358bdc26/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 Sistemyudha.dosen.ittelkom-pwt.ac.id/wp-content/uploads/sites/73/2018/02/... · mengakses data dengan ... Contohnya untuk mengurutkan pengguna tidak perlu mengetahui](https://reader036.fdokumen.com/reader036/viewer/2022081416/5c7b5b7509d3f246358bdc26/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 Sistemyudha.dosen.ittelkom-pwt.ac.id/wp-content/uploads/sites/73/2018/02/... · mengakses data dengan ... Contohnya untuk mengurutkan pengguna tidak perlu mengetahui](https://reader036.fdokumen.com/reader036/viewer/2022081416/5c7b5b7509d3f246358bdc26/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 Sistemyudha.dosen.ittelkom-pwt.ac.id/wp-content/uploads/sites/73/2018/02/... · mengakses data dengan ... Contohnya untuk mengurutkan pengguna tidak perlu mengetahui](https://reader036.fdokumen.com/reader036/viewer/2022081416/5c7b5b7509d3f246358bdc26/html5/thumbnails/59.jpg)
15. Protection
○ Melindungi user dari kesalahan yang umumdilakukan.
○ Misalnya, dengan memberikan fitur back atauundo.
![Page 60: Desain Arsitektur Sistemyudha.dosen.ittelkom-pwt.ac.id/wp-content/uploads/sites/73/2018/02/... · mengakses data dengan ... Contohnya untuk mengurutkan pengguna tidak perlu mengetahui](https://reader036.fdokumen.com/reader036/viewer/2022081416/5c7b5b7509d3f246358bdc26/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 Sistemyudha.dosen.ittelkom-pwt.ac.id/wp-content/uploads/sites/73/2018/02/... · mengakses data dengan ... Contohnya untuk mengurutkan pengguna tidak perlu mengetahui](https://reader036.fdokumen.com/reader036/viewer/2022081416/5c7b5b7509d3f246358bdc26/html5/thumbnails/61.jpg)
17. Ease of Use
Membuat sistem yang mudah digunakan untuk segala kategori pengguna (awam atau ahli)
![Page 62: Desain Arsitektur Sistemyudha.dosen.ittelkom-pwt.ac.id/wp-content/uploads/sites/73/2018/02/... · mengakses data dengan ... Contohnya untuk mengurutkan pengguna tidak perlu mengetahui](https://reader036.fdokumen.com/reader036/viewer/2022081416/5c7b5b7509d3f246358bdc26/html5/thumbnails/62.jpg)
Proses Desain Antarmuka (1)
1. Menggunakan User Scenario
![Page 63: Desain Arsitektur Sistemyudha.dosen.ittelkom-pwt.ac.id/wp-content/uploads/sites/73/2018/02/... · mengakses data dengan ... Contohnya untuk mengurutkan pengguna tidak perlu mengetahui](https://reader036.fdokumen.com/reader036/viewer/2022081416/5c7b5b7509d3f246358bdc26/html5/thumbnails/63.jpg)
![Page 64: Desain Arsitektur Sistemyudha.dosen.ittelkom-pwt.ac.id/wp-content/uploads/sites/73/2018/02/... · mengakses data dengan ... Contohnya untuk mengurutkan pengguna tidak perlu mengetahui](https://reader036.fdokumen.com/reader036/viewer/2022081416/5c7b5b7509d3f246358bdc26/html5/thumbnails/64.jpg)
Contoh
64
![Page 65: Desain Arsitektur Sistemyudha.dosen.ittelkom-pwt.ac.id/wp-content/uploads/sites/73/2018/02/... · mengakses data dengan ... Contohnya untuk mengurutkan pengguna tidak perlu mengetahui](https://reader036.fdokumen.com/reader036/viewer/2022081416/5c7b5b7509d3f246358bdc26/html5/thumbnails/65.jpg)
Contoh
65
![Page 66: Desain Arsitektur Sistemyudha.dosen.ittelkom-pwt.ac.id/wp-content/uploads/sites/73/2018/02/... · mengakses data dengan ... Contohnya untuk mengurutkan pengguna tidak perlu mengetahui](https://reader036.fdokumen.com/reader036/viewer/2022081416/5c7b5b7509d3f246358bdc26/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 Sistemyudha.dosen.ittelkom-pwt.ac.id/wp-content/uploads/sites/73/2018/02/... · mengakses data dengan ... Contohnya untuk mengurutkan pengguna tidak perlu mengetahui](https://reader036.fdokumen.com/reader036/viewer/2022081416/5c7b5b7509d3f246358bdc26/html5/thumbnails/67.jpg)
![Page 68: Desain Arsitektur Sistemyudha.dosen.ittelkom-pwt.ac.id/wp-content/uploads/sites/73/2018/02/... · mengakses data dengan ... Contohnya untuk mengurutkan pengguna tidak perlu mengetahui](https://reader036.fdokumen.com/reader036/viewer/2022081416/5c7b5b7509d3f246358bdc26/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 Sistemyudha.dosen.ittelkom-pwt.ac.id/wp-content/uploads/sites/73/2018/02/... · mengakses data dengan ... Contohnya untuk mengurutkan pengguna tidak perlu mengetahui](https://reader036.fdokumen.com/reader036/viewer/2022081416/5c7b5b7509d3f246358bdc26/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 Sistemyudha.dosen.ittelkom-pwt.ac.id/wp-content/uploads/sites/73/2018/02/... · mengakses data dengan ... Contohnya untuk mengurutkan pengguna tidak perlu mengetahui](https://reader036.fdokumen.com/reader036/viewer/2022081416/5c7b5b7509d3f246358bdc26/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 Sistemyudha.dosen.ittelkom-pwt.ac.id/wp-content/uploads/sites/73/2018/02/... · mengakses data dengan ... Contohnya untuk mengurutkan pengguna tidak perlu mengetahui](https://reader036.fdokumen.com/reader036/viewer/2022081416/5c7b5b7509d3f246358bdc26/html5/thumbnails/71.jpg)