---

🟢 1. Pendahuluan

Dalam pengembangan sistem informasi, keberhasilan sebuah aplikasi tidak hanya ditentukan oleh proses pengolahan data, tetapi juga oleh bagaimana data dimasukkan (input) dan bagaimana informasi ditampilkan (output).

Perancangan input dan output merupakan bagian penting dalam analisis dan perancangan sistem karena berkaitan langsung dengan:

• Pengguna sistem
• Kecepatan kerja
• Ketepatan data
• Kualitas informasi

Sistem yang baik harus memiliki:
✅ Input yang mudah digunakan
✅ Output yang informatif
✅ Tampilan yang jelas
✅ Proses yang efisien

---

🟢 2. Pengertian Input dan Output Sistem

🟡 2.1 Pengertian Input Sistem

📌 Definisi

Input adalah data atau informasi yang dimasukkan ke dalam sistem untuk diproses menjadi informasi.

---

🔍 Narasi Penjelasan

Input dapat berupa:

• Data teks
• Angka
• Gambar
• File
• Pilihan menu
• Formulir

Contoh input:

• Form login
• Form mahasiswa
• Form transaksi
• Upload dokumen

---

🟡 2.2 Pengertian Output Sistem

📌 Definisi

Output adalah hasil pengolahan data yang ditampilkan oleh sistem kepada pengguna.

---

🔍 Narasi Penjelasan

Output dapat berupa:

• Laporan
• Grafik
• Dashboard
• Notifikasi
• Slip pembayaran
• Cetak data

Output harus:

• Mudah dibaca
• Informatif
• Akurat
• Relevan

---

🖼️ Ilustrasi Input dan Output Sistem

7

---

🟢 3. Tujuan Perancangan Input dan Output

📌 Tujuan Utama

Perancangan input dan output bertujuan:

• Mempermudah pengguna
• Mengurangi kesalahan data
• Meningkatkan efisiensi kerja
• Menyajikan informasi yang jelas

---

🔍 Narasi Penjelasan

Desain input dan output yang baik membantu:

• User lebih cepat bekerja
• Data lebih akurat
• Informasi mudah dipahami
• Sistem lebih profesional

---

📊 Tujuan Input dan Output

Komponen	Tujuan
Input	Mempermudah pengisian data
Output	Menyajikan informasi
Keduanya	Efisiensi sistem

---

🟢 4. Perancangan Input Sistem

🟡 4.1 Prinsip Perancangan Input

📌 Prinsip Input

Perancangan input harus:

• Mudah digunakan
• Konsisten
• Sederhana
• Valid
• Efisien

---

🔍 Narasi Penjelasan

Form input yang baik:

• Tidak membingungkan
• Mengurangi kesalahan user
• Memiliki validasi data
• Cepat diisi

---

🖼️ Form Input Sistem

8

---

🟡 4.2 Jenis-Jenis Input

📊 Jenis Input

Jenis	Contoh
Textbox	Nama
Number	Umur
Radio Button	Jenis kelamin
Checkbox	Hobi
Dropdown	Jurusan
Upload File	Dokumen

---

🔍 Narasi Penjelasan

Pemilihan jenis input harus sesuai kebutuhan:

• Angka → Number
• Pilihan tunggal → Radio button
• Banyak pilihan → Checkbox

---

🟢 5. Validasi Input

📌 Pengertian Validasi

Validasi adalah proses pengecekan data input sebelum disimpan.

---

🔍 Narasi Penjelasan

Tujuan validasi:

• Menghindari data kosong
• Mengurangi kesalahan
• Menjaga kualitas database

---

📊 Jenis Validasi

Validasi	Fungsi
Required	Wajib diisi
Numeric	Hanya angka
Email	Format email
Date	Validasi tanggal
Length	Panjang karakter

---

🖼️ Validasi Form Input

7

---

🟢 6. Perancangan Output Sistem

🟡 6.1 Prinsip Perancangan Output

📌 Prinsip Output

Output harus:

• Informatif
• Akurat
• Mudah dibaca
• Tepat waktu
• Relevan

---

🔍 Narasi Penjelasan

Output yang baik membantu:

• Pengambilan keputusan
• Monitoring sistem
• Analisis data

---

🖼️ Dashboard dan Laporan Sistem

6

---

🟡 6.2 Jenis-Jenis Output

📊 Jenis Output

Jenis	Contoh
Laporan	Laporan penjualan
Grafik	Statistik data
Dashboard	Monitoring sistem
Notifikasi	Pesan sistem
Slip	Bukti pembayaran

---

🟢 7. Desain Form Input

🟡 7.1 Komponen Form Input

📌 Komponen Penting

• Label
• Textbox
• Button
• Dropdown
• Validasi

---

🔍 Narasi Penjelasan

Form input harus:

• Tersusun rapi
• Mudah dibaca
• Tidak terlalu panjang

---

🖼️ Contoh Form Input Modern

8

---

🟢 8. Desain Output Laporan

🟡 8.1 Laporan Sistem

📌 Pengertian

Laporan adalah output yang menampilkan hasil pengolahan data.

---

🔍 Narasi Penjelasan

Laporan digunakan untuk:

• Monitoring
• Evaluasi
• Pengambilan keputusan

---

📊 Komponen Laporan

Komponen	Fungsi
Judul	Identitas laporan
Tabel	Menampilkan data
Grafik	Visualisasi data
Footer	Informasi tambahan

---

🖼️ Contoh Laporan Sistem

8

---

🟢 9. Dashboard Sistem

📌 Pengertian Dashboard

Dashboard adalah tampilan visual yang menampilkan informasi penting secara ringkas.

---

🔍 Narasi Penjelasan

Dashboard membantu:

• Monitoring real-time
• Analisis cepat
• Pengambilan keputusan

---

🖼️ Dashboard Modern

6

---

🟢 10. Human Computer Interaction (HCI)

📌 Pengertian

HCI adalah interaksi antara manusia dan komputer dalam penggunaan sistem.

---

🔍 Narasi Penjelasan

Tujuan HCI:

• Membuat sistem nyaman digunakan
• Mempermudah interaksi user
• Mengurangi kesalahan penggunaan

---

📊 Prinsip HCI

Prinsip	Fungsi
Usability	Kemudahan penggunaan
Accessibility	Mudah diakses
Efficiency	Efisiensi kerja
Satisfaction	Kepuasan pengguna

---

🖼️ Human Computer Interaction

7

---

🟢 11. Responsive Design pada Input dan Output

📌 Pengertian

Responsive design adalah desain yang dapat menyesuaikan tampilan di berbagai perangkat.

---

🔍 Narasi Penjelasan

Aplikasi modern harus:

• Mobile friendly
• Responsive
• Fleksibel

---

🖼️ Responsive System Interface

6

---

🟢 12. Software Perancangan UI Sistem

📌 Tools Desain

Software	Fungsi
Figma	UI Design
Adobe XD	Prototype
Canva	Mockup sederhana
Balsamiq	Wireframe
Draw.io	Diagram sistem

---

🖼️ Tools UI/UX

6

---

🟢 13. Studi Kasus Sistem Akademik

🟡 Input Sistem

Form:

• Login
• Input nilai
• KRS
• Data mahasiswa

---

🟡 Output Sistem

Laporan:

• KHS
• Transkrip
• Jadwal kuliah
• Dashboard akademik

---

🖼️ Sistem Akademik UI

6

---

🟢 14. Kesalahan Umum dalam Desain Input dan Output

📌 Kesalahan Umum

• Form terlalu panjang
• Warna tidak jelas
• Font sulit dibaca
• Tidak ada validasi
• Informasi output terlalu banyak

---

🔍 Narasi Penjelasan

Kesalahan desain menyebabkan:

• User bingung
• Data salah input
• Informasi sulit dipahami

---

🖼️ Good UI vs Bad UI

6

---

🟢 15. Tutorial Praktikum

💻 Praktikum 1 — Membuat Form Input

🎯 Tujuan

Mahasiswa mampu membuat desain form input sederhana.

---

📌 Langkah Praktikum

1. Tentukan data input
2. Pilih komponen form
3. Tambahkan validasi
4. Susun layout form

---

💻 Praktikum 2 — Membuat Dashboard Output

🎯 Tujuan

Mahasiswa memahami desain output sistem.

---

📌 Langkah Praktikum

1. Tentukan informasi utama
2. Buat tabel laporan
3. Tambahkan grafik
4. Desain dashboard sederhana

---

🖼️ Tutorial Praktikum UI Sistem

7

---

🟢 16. Latihan Mahasiswa

🎯 Latihan Individu

1. Jelaskan pengertian input sistem!
2. Jelaskan pengertian output sistem!
3. Apa fungsi validasi input?
4. Mengapa dashboard penting?

---

🎯 Latihan Kelompok

Buat:

• Form input mahasiswa
• Dashboard akademik
• Laporan penjualan
• Form transaksi kasir

---

🟢 17. Diskusi Kelas

📌 Topik Diskusi

1. Mengapa desain input mempengaruhi kualitas data?
2. Apa dampak output buruk terhadap pengguna?
3. Mana lebih penting: input atau output?

---

🟢 18. Kesimpulan

📌 Ringkasan Materi

Perancangan input dan output sistem merupakan bagian penting dalam pengembangan aplikasi untuk menciptakan sistem yang:
✅ Mudah digunakan
✅ Efisien
✅ Informatif
✅ User friendly

Input fokus pada:

• Pengisian data

Output fokus pada:

• Penyajian informasi

Komponen penting:

• Form input
• Validasi data
• Dashboard
• Laporan sistem

---

🎯 Capaian Pembelajaran

Setelah mempelajari materi ini mahasiswa mampu:
✅ Memahami konsep input dan output sistem
✅ Mendesain form input yang baik
✅ Membuat output laporan sistem
✅ Mendesain dashboard sederhana
✅ Memahami validasi data
✅ Menggunakan tools desain UI sistem