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