1. Pengertian Interaksi Web dan Mobile
6
📖 Deskripsi
Interaksi berbasis Web dan Mobile adalah cara pengguna berinteraksi dengan sistem melalui perangkat seperti komputer (web) dan smartphone (mobile).
🧠 Narasi Penjelasan
Perbedaan utama:
- Web → digunakan melalui browser
- Mobile → digunakan melalui aplikasi atau mobile web
👉 Setiap platform memiliki karakteristik interaksi yang berbeda.
2. Karakteristik Interaksi Web
6
📖 Deskripsi
Interaksi pada web memiliki ciri khas tersendiri.
🧠 Narasi Penjelasan
Ciri utama:
- Layar besar
- Navigasi kompleks
- Menggunakan mouse & keyboard
👉 Cocok untuk aplikasi kompleks seperti sistem informasi.
3. Karakteristik Interaksi Mobile
6
📖 Deskripsi
Interaksi mobile dirancang untuk perangkat kecil.
🧠 Narasi Penjelasan
Ciri utama:
- Layar kecil
- Touchscreen
- Navigasi sederhana
👉 Fokus pada kemudahan dan kecepatan.
4. Perbedaan Web vs Mobile
7
📊 Tabel:
| Aspek | Web | Mobile |
|---|---|---|
| Layar | Besar | Kecil |
| Input | Mouse/Keyboard | Touch |
| Navigasi | Kompleks | Sederhana |
🧠 Narasi Penjelasan
👉 Desain harus menyesuaikan platform.
5. Prinsip Desain Web
7
📖 Deskripsi
Panduan dalam merancang UI web.
🧠 Narasi Penjelasan
- Navigasi jelas
- Layout rapi
- Informasi mudah ditemukan
6. Prinsip Desain Mobile
8
📖 Deskripsi
Panduan desain untuk mobile.
🧠 Narasi Penjelasan
- Tombol besar
- Mudah disentuh
- Minimalis
👉 Mobile harus cepat dan praktis.
7. Responsive Design
6
📖 Deskripsi
Desain yang menyesuaikan berbagai perangkat.
🧠 Narasi Penjelasan
👉 Satu desain bisa digunakan:
- Desktop
- Tablet
- Smartphone
8. Gesture dalam Mobile
5
📖 Deskripsi
Interaksi berbasis sentuhan.
🧠 Narasi Penjelasan
Jenis gesture:
- Tap
- Swipe
- Pinch
👉 Gesture membuat interaksi lebih natural.
9. Navigasi Web dan Mobile
7
📖 Deskripsi
Cara berpindah antar halaman.
🧠 Narasi Penjelasan
- Web → menu lengkap
- Mobile → hamburger menu
10. Kecepatan dan Performa
6
📖 Deskripsi
Kecepatan mempengaruhi UX.
🧠 Narasi Penjelasan
👉 Sistem harus:
- Cepat
- Responsif
11. Aksesibilitas
7
📖 Deskripsi
Sistem harus bisa digunakan semua orang.
🧠 Narasi Penjelasan
👉 Perhatikan:
- Ukuran teks
- Warna
- Navigasi
12. Keamanan Interaksi
6
📖 Deskripsi
Keamanan dalam interaksi pengguna.
🧠 Narasi Penjelasan
👉 Contoh:
- Login
- OTP
- Enkripsi
13. Studi Kasus Web vs Mobile
8
📖 Deskripsi
Perbandingan aplikasi web dan mobile.
🧠 Narasi Penjelasan
👉 Contoh:
- E-commerce
- Media sosial
14. Tantangan Desain Web dan Mobile
7
📖 Deskripsi
Hambatan dalam desain.
🧠 Narasi Penjelasan
- Banyak perangkat
- Ukuran layar berbeda
- Koneksi internet
15. Ringkasan Materi
🧠 Narasi Penjelasan
- Web dan mobile memiliki karakteristik berbeda
- Desain harus menyesuaikan perangkat
- UX menjadi fokus utama
16. Kesimpulan
- Interaksi web dan mobile sangat penting dalam IMK
- Desain harus fleksibel dan responsif
- Fokus utama adalah kenyamanan pengguna
🎯 LATIHAN / DISKUSI
- Apa perbedaan web dan mobile?
- Apa itu responsive design?
- Mengapa gesture penting di mobile?
📝 TUGAS
- Analisis aplikasi:
- Bandingkan versi web dan mobile
- Jelaskan kelebihan dan kekurangan
