🟢 1. Pendahuluan
Dalam pengembangan sistem informasi modern, keberhasilan aplikasi tidak hanya ditentukan oleh fungsi sistem, tetapi juga oleh kenyamanan dan kemudahan pengguna saat menggunakan aplikasi tersebut.
Karena itu diperlukan:
- UI (User Interface)
- UX (User Experience)
UI/UX menjadi bagian penting dalam:
- Website
- Aplikasi mobile
- Sistem informasi akademik
- E-commerce
- Dashboard perusahaan
- Aplikasi pelayanan publik
Desain UI/UX yang baik dapat:
✅ Mempermudah penggunaan sistem
✅ Meningkatkan kepuasan pengguna
✅ Mengurangi kesalahan penggunaan
✅ Membantu efisiensi kerja pengguna
🟢 2. Pengertian UI dan UX
🟡 2.1 Pengertian UI (User Interface)
📌 Definisi UI
User Interface (UI) adalah tampilan visual yang digunakan pengguna untuk berinteraksi dengan sistem atau aplikasi.
🔍 Narasi Penjelasan
UI mencakup:
- Tombol
- Menu
- Warna
- Icon
- Form input
- Layout halaman
UI berfokus pada:
✅ Tampilan aplikasi
✅ Keindahan desain
✅ Konsistensi visual
🟡 2.2 Pengertian UX (User Experience)
📌 Definisi UX
User Experience (UX) adalah pengalaman pengguna saat menggunakan sistem atau aplikasi.
🔍 Narasi Penjelasan
UX fokus pada:
- Kemudahan penggunaan
- Kenyamanan pengguna
- Efisiensi penggunaan sistem
- Kepuasan pengguna
UX tidak hanya tentang tampilan, tetapi juga tentang bagaimana aplikasi bekerja.
🖼️ Ilustrasi UI dan UX
7
🟢 3. Perbedaan UI dan UX
📊 Tabel Perbedaan UI dan UX
| UI | UX |
|---|---|
| Fokus tampilan | Fokus pengalaman |
| Desain visual | Kemudahan penggunaan |
| Warna, icon, layout | Kepuasan pengguna |
| Bersifat estetika | Bersifat fungsional |
🔍 Narasi Penjelasan
UI tanpa UX:
- Aplikasi bagus tetapi membingungkan
UX tanpa UI:
- Aplikasi mudah digunakan tetapi tidak menarik
Karena itu UI dan UX harus saling mendukung.
🟢 4. Tujuan Perancangan UI/UX
📌 Tujuan Utama
Perancangan UI/UX bertujuan:
- Mempermudah interaksi pengguna
- Membuat aplikasi nyaman digunakan
- Mengurangi kesalahan penggunaan
- Meningkatkan efisiensi kerja
🔍 Narasi Penjelasan
Sistem yang baik harus:
- Mudah dipahami
- Mudah digunakan
- Responsif
- Konsisten
- Menarik secara visual
📊 Manfaat UI/UX
| Manfaat | Penjelasan |
|---|---|
| User Friendly | Mudah digunakan |
| Efisien | Menghemat waktu |
| Menarik | Tampilan profesional |
| Konsisten | Navigasi jelas |
🟢 5. Prinsip-Prinsip UI/UX
🟡 5.1 Simplicity
📌 Pengertian
Desain harus sederhana dan mudah dipahami.
🟡 5.2 Consistency
📌 Pengertian
Desain harus konsisten di seluruh halaman.
🟡 5.3 Visibility
📌 Pengertian
Fitur penting harus mudah terlihat.
🟡 5.4 Feedback
📌 Pengertian
Sistem harus memberikan respon terhadap tindakan pengguna.
🟡 5.5 User Control
📌 Pengertian
Pengguna harus memiliki kontrol terhadap sistem.
🖼️ Prinsip UI/UX
8
🟢 6. Elemen UI (User Interface)
🟡 6.1 Layout
📌 Pengertian
Susunan elemen pada halaman aplikasi.
🟡 6.2 Typography
📌 Pengertian
Jenis dan ukuran huruf pada aplikasi.
🟡 6.3 Color
📌 Pengertian
Penggunaan warna untuk meningkatkan visual.
🟡 6.4 Icon
📌 Pengertian
Simbol visual yang membantu pengguna.
🟡 6.5 Button
📌 Pengertian
Komponen interaksi pengguna.
🖼️ Elemen UI Modern
8
📊 Tabel Elemen UI
| Elemen | Fungsi |
|---|---|
| Layout | Mengatur posisi |
| Typography | Mempermudah membaca |
| Color | Memberi identitas visual |
| Icon | Mempermudah navigasi |
| Button | Interaksi pengguna |
🟢 7. Proses Perancangan UX
🟡 7.1 User Research
📌 Pengertian
Mempelajari kebutuhan pengguna.
🟡 7.2 User Persona
📌 Pengertian
Membuat profil pengguna aplikasi.
🟡 7.3 User Flow
📌 Pengertian
Alur aktivitas pengguna dalam aplikasi.
🟡 7.4 Wireframe
📌 Pengertian
Kerangka awal tampilan aplikasi.
🟡 7.5 Prototype
📌 Pengertian
Simulasi aplikasi sebelum dikembangkan.
🖼️ Tahapan UX Design
7
🟢 8. Wireframe dalam UI/UX
📌 Pengertian Wireframe
Wireframe adalah rancangan awal tampilan aplikasi tanpa desain detail.
🔍 Narasi Penjelasan
Wireframe digunakan untuk:
- Menentukan layout
- Menentukan posisi menu
- Menentukan navigasi aplikasi
Wireframe dibuat sebelum desain final.
🖼️ Contoh Wireframe
7
🟢 9. Prototype dalam UI/UX
📌 Pengertian Prototype
Prototype adalah simulasi interaktif aplikasi.
🔍 Narasi Penjelasan
Prototype membantu:
- Menguji desain
- Simulasi penggunaan
- Mendapat feedback pengguna
🖼️ Prototype Aplikasi
7
🟢 10. User Flow
📌 Pengertian User Flow
User flow adalah alur perjalanan pengguna saat menggunakan aplikasi.
🔍 Narasi Penjelasan
User flow menunjukkan:
- Langkah pengguna
- Navigasi aplikasi
- Interaksi sistem
🖼️ Diagram User Flow
11
🟢 11. Responsive Design
📌 Pengertian
Responsive design adalah desain yang dapat menyesuaikan ukuran layar perangkat.
🔍 Narasi Penjelasan
Aplikasi modern harus:
- Mobile friendly
- Responsive
- Fleksibel di berbagai perangkat
🖼️ Responsive UI Design
6
🟢 12. Software Desain UI/UX
📌 Tools UI/UX
| Software | Fungsi |
|---|---|
| Figma | Desain UI online |
| Adobe XD | Prototype aplikasi |
| Sketch | UI design |
| Canva | Desain sederhana |
| Balsamiq | Wireframe |
🖼️ Software UI/UX
7
🟢 13. Studi Kasus UI/UX Sistem Akademik
🟡 Kebutuhan Sistem
User:
- Mahasiswa
- Dosen
- Admin
🟡 Fitur Utama
- Login
- KRS
- Jadwal
- Nilai
- Dashboard
🟡 Desain UI
- Warna konsisten
- Menu sederhana
- Responsive layout
🖼️ UI Sistem Akademik
8
🟢 14. Kesalahan Umum dalam UI/UX
📌 Kesalahan Umum
- Tampilan terlalu ramai
- Navigasi membingungkan
- Warna tidak konsisten
- Font sulit dibaca
- Tombol terlalu kecil
🔍 Narasi Penjelasan
UI/UX buruk menyebabkan:
- User kesulitan menggunakan sistem
- Pengguna cepat bosan
- Produktivitas menurun
🖼️ Contoh UI Buruk dan UI Baik
8
🟢 15. Tutorial Praktikum
💻 Praktikum 1 — Membuat Wireframe
🎯 Tujuan
Mahasiswa mampu membuat wireframe aplikasi sederhana.
📌 Studi Kasus
Sistem Perpustakaan.
📌 Langkah Praktikum
- Tentukan halaman utama
- Tentukan menu
- Gambar layout
- Tentukan posisi button
💻 Praktikum 2 — Membuat Prototype di Figma
🎯 Tujuan
Mahasiswa memahami prototype UI/UX.
📌 Langkah Praktikum
- Buka Figma
- Buat frame mobile/web
- Tambahkan komponen UI
- Hubungkan halaman
- Simulasikan prototype
🖼️ Tutorial UI/UX
8
🟢 16. Latihan Mahasiswa
🎯 Latihan Individu
- Jelaskan pengertian UI!
- Jelaskan pengertian UX!
- Apa fungsi wireframe?
- Mengapa responsive design penting?
🎯 Latihan Kelompok
Buat desain:
- Sistem akademik
- Sistem perpustakaan
- Sistem kasir
- Sistem rumah sakit
Minimal:
- Wireframe
- User flow
- Prototype sederhana
🟢 17. Diskusi Kelas
📌 Topik Diskusi
- Mengapa UI/UX penting dalam aplikasi?
- Apa dampak UI buruk terhadap pengguna?
- Mana lebih penting: UI atau UX?
🟢 18. Kesimpulan
📌 Ringkasan Materi
Perancangan UI/UX merupakan proses penting dalam pengembangan sistem untuk menciptakan aplikasi yang:
✅ Menarik
✅ Mudah digunakan
✅ Nyaman digunakan
✅ Efisien
UI fokus pada:
- Tampilan visual
UX fokus pada:
- Pengalaman pengguna
Komponen penting:
- Wireframe
- User Flow
- Prototype
- Responsive Design
🎯 Capaian Pembelajaran
Setelah mempelajari materi ini mahasiswa mampu:
✅ Memahami konsep UI dan UX
✅ Mendesain antarmuka aplikasi
✅ Membuat wireframe
✅ Membuat prototype sederhana
✅ Memahami responsive design
✅ Menggunakan tools UI/UX seperti Figma dan Adobe XD
